Skip to Content
FrontendBundlesComponentsForm ComponentsBoolean Toggle

Boolean Toggle

A toggle switch component for boolean form fields. Used by RenderFormFields for ColumnTypeEnum.BOOLEAN fields.

Import

import { BooleanToggle } from "@phpcreation/frontend-components-react-nextjs-bundle/components/BooleanToggle";

Props

PropTypeDefaultDescription
valuebooleanfalseControlled value
onChange(value: boolean) => void—Change handler
disabledbooleanfalseDisable the toggle
labelstring—Optional inline label
classNamestring—Additional CSS classes

Usage

import { BooleanToggle } from "...";
 
<BooleanToggle
  value={isActive}
  onChange={setIsActive}
  label="Active"
/>

With React Hook Form

import { useForm } from "react-hook-form";
import { Form, FormField, FormItem, FormLabel, FormControl } from "...";
import { BooleanToggle } from "...";
 
<FormField
  control={form.control}
  name="isActive"
  render={({ field }) => (
    <FormItem>
      <FormLabel>Active</FormLabel>
      <FormControl>
        <BooleanToggle
          value={field.value}
          onChange={field.onChange}
        />
      </FormControl>
    </FormItem>
  )}
/>
Last updated on
ComboboxColor Picker