ToggleField

Description

A toggle switch field component that provides a visual switch interface for boolean or binary (0/1) values. Features customizable size, variant colors, and label text for on/off states.

Import

import { ToggleField } from '@components/common/form/ToggleField';

Usage

import { Form } from '@components/common/form/Form';
import { ToggleField } from '@components/common/form/ToggleField';

function SettingsForm() {
  return (
    <Form action="/api/settings">
      <ToggleField
        name="emailNotifications"
        label="Email Notifications"
        defaultValue={true}
      />
    </Form>
  );
}

Props

Name	Type	Default	Description
name	FieldPath<T>	-	Field name (required)
label	string	-	Label text displayed above the toggle
trueValue	boolean | 1	true	Value when toggle is on
falseValue	boolean | 0	false	Value when toggle is off
trueLabel	string	'Yes'	Label text when toggle is on
falseLabel	string	'No'	Label text when toggle is off
size	'sm' | 'md' | 'lg'	'md'	Size of the toggle switch
variant	'default' | 'success' | 'warning' | 'danger'	'default'	Color variant for the toggle
defaultValue	boolean | 0 | 1	false	Default toggle state
disabled	boolean	false	Disables the toggle
required	boolean	false	Makes the field required
error	string	-	Custom error message
helperText	string	-	Helper text shown in a tooltip
validation	RegisterOptions<T>	-	React Hook Form validation rules
onChange	(value: boolean | 0 | 1) => void	-	Callback fired when the value changes
wrapperClassName	string	-	CSS class for the wrapper div

Example: Boolean Values

import { Form } from '@components/common/form/Form';
import { ToggleField } from '@components/common/form/ToggleField';

function NotificationSettings() {
  return (
    <Form action="/api/notifications">
      <ToggleField
        name="emailEnabled"
        label="Email Notifications"
        trueLabel="Enabled"
        falseLabel="Disabled"
        defaultValue={true}
      />
      
      <ToggleField
        name="smsEnabled"
        label="SMS Notifications"
        trueLabel="On"
        falseLabel="Off"
      />
    </Form>
  );
}

Example: Binary Values (0/1)

import { Form } from '@components/common/form/Form';
import { ToggleField } from '@components/common/form/ToggleField';

function ProductForm() {
  return (
    <Form action="/api/products">
      <ToggleField
        name="isPublished"
        label="Product Status"
        trueValue={1}
        falseValue={0}
        trueLabel="Published"
        falseLabel="Draft"
        defaultValue={0}
      />
    </Form>
  );
}

Example: Different Sizes

import { Form } from '@components/common/form/Form';
import { ToggleField } from '@components/common/form/ToggleField';

function SizeDemo() {
  return (
    <Form action="/api/settings">
      <ToggleField
        name="setting1"
        label="Small Toggle"
        size="sm"
      />
      
      <ToggleField
        name="setting2"
        label="Medium Toggle"
        size="md"
      />
      
      <ToggleField
        name="setting3"
        label="Large Toggle"
        size="lg"
      />
    </Form>
  );
}

Example: Color Variants

import { Form } from '@components/common/form/Form';
import { ToggleField } from '@components/common/form/ToggleField';

function VariantDemo() {
  return (
    <Form action="/api/settings">
      <ToggleField
        name="default"
        label="Default"
        variant="default"
        defaultValue={true}
      />
      
      <ToggleField
        name="success"
        label="Success"
        variant="success"
        defaultValue={true}
      />
      
      <ToggleField
        name="warning"
        label="Warning"
        variant="warning"
        defaultValue={true}
      />
      
      <ToggleField
        name="danger"
        label="Danger"
        variant="danger"
        defaultValue={true}
      />
    </Form>
  );
}

Example: With Callback

import { Form } from '@components/common/form/Form';
import { ToggleField } from '@components/common/form/ToggleField';
import { useState } from 'react';

function FeatureToggle() {
  const [isEnabled, setIsEnabled] = useState(false);

  return (
    <Form action="/api/features">
      <ToggleField
        name="feature"
        label="Advanced Features"
        onChange={(value) => {
          setIsEnabled(Boolean(value));
          console.log('Feature toggled:', value);
        }}
        helperText={isEnabled ? 'Advanced features are active' : 'Enable to access more features'}
      />
    </Form>
  );
}

Size Options

• sm: Small toggle (h-5 w-9)
• md: Medium toggle (h-6 w-11) - default
• lg: Large toggle (h-7 w-14)

Variant Colors

• default: Blue (default)
• success: Green
• warning: Yellow
• danger: Red

Features

• Visual Feedback: Animated switch with smooth transitions
• Flexible Values: Support for boolean or binary (0/1) values
• Custom Labels: Different labels for on/off states
• Size Control: Three size options
• Color Variants: Four color schemes
• Controller Integration: Uses React Hook Form Controller
• Accessibility: Includes ARIA attributes and screen reader support
• TypeScript Support: Full type safety with generics

Styling

The toggle uses Tailwind CSS classes and includes:

• Focus ring for keyboard navigation
• Smooth color transitions
• Disabled state styling
• Error state styling with red ring

Related Components

• Form - Parent form component
• CheckboxField - Checkbox input
• RadioGroupField - Radio button selection