> ## Documentation Index
> Fetch the complete documentation index at: https://docs.devreadykit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Toggle

> A toggle switch component for boolean state management

export const ToggleWithLabelsPreview = () => <iframe src="https://kerny-custom.vercel.app/preview/ToggleWithLabelsExample" frameBorder="0" width="100%" height="220"></iframe>;

export const ToggleWithIconsPreview = () => <iframe src="https://kerny-custom.vercel.app/preview/ToggleWithIconsExample" frameBorder="0" width="100%" height="220"></iframe>;

export const ToggleSettingsPanelPreview = () => <iframe src="https://kerny-custom.vercel.app/preview/ToggleSettingsPanelExample" frameBorder="0" width="100%" height="380"></iframe>;

export const ToggleReadOnlyPreview = () => <iframe src="https://kerny-custom.vercel.app/preview/ToggleReadOnlyExample" frameBorder="0" width="100%" height="220"></iframe>;

export const ToggleFormPreview = () => <iframe src="https://kerny-custom.vercel.app/preview/ToggleFormExample" frameBorder="0" width="100%" height="420"></iframe>;

export const ToggleFeatureTogglePreview = () => <iframe src="https://kerny-custom.vercel.app/preview/ToggleFeatureToggleExample" frameBorder="0" width="100%" height="360"></iframe>;

export const ToggleDisabledPreview = () => <iframe src="https://kerny-custom.vercel.app/preview/ToggleDisabledExample" frameBorder="0" width="100%" height="220"></iframe>;

export const ToggleCustomIconsPreview = () => <iframe src="https://kerny-custom.vercel.app/preview/ToggleCustomIconsExample" frameBorder="0" width="100%" height="220"></iframe>;

export const ToggleBasicPreview = () => <iframe src="https://kerny-custom.vercel.app/preview/ToggleBasicExample" frameBorder="0" width="100%" height="280"></iframe>;

## Overview

The Toggle component provides a switch-style toggle for boolean state management, with support for labels, icons, and various states.

## Basic Usage

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { useState } from "react";
    import { Toggle } from '@peppermint-design/devreadykit-custom';

    export default function App() {
      const [enabled, setEnabled] = useState(false);

      return (
        <Toggle
          checked={enabled}
          onChange={setEnabled}
          label="Enable notifications"
        />
      );
    }
    ```
  </Tab>

  <Tab title="Preview">
    <ToggleBasicPreview />
  </Tab>
</Tabs>

## With Labels

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { Toggle } from '@peppermint-design/devreadykit-custom';

    export default function WithLabels() {
      return (
        <>
          <Toggle checked label="Enable dark mode" />
          <Toggle checked={false} label="Auto-save documents" />
        </>
      );
    }
    ```
  </Tab>

  <Tab title="Preview">
    <ToggleWithLabelsPreview />
  </Tab>
</Tabs>

## With Icons

### Default Icons

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { Toggle } from '@peppermint-design/devreadykit-custom';

    export default function DefaultIcons() {
      return (
        <>
          <Toggle checked label="Enable notifications" icons />
          <Toggle checked={false} label="Silent mode" icons />
        </>
      );
    }
    ```
  </Tab>

  <Tab title="Preview">
    <ToggleWithIconsPreview />
  </Tab>
</Tabs>

### Custom Icons

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { Toggle } from '@peppermint-design/devreadykit-custom';
    import { Check } from '@/assets/icons/check';
    import { Close } from '@/assets/icons/close';

    export default function CustomIcons() {
      return (
        <>
          <Toggle 
            checked
            label="Custom on icon"
            iconChecked={<Check />}
          />

          <Toggle 
            checked={false}
            label="Custom off icon"
            iconUnchecked={<Close />}
          />
        </>
      );
    }
    ```
  </Tab>

  <Tab title="Preview">
    <ToggleCustomIconsPreview />
  </Tab>
</Tabs>

## States

### Disabled

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { Toggle } from '@peppermint-design/devreadykit-custom';

    export default function DisabledToggles() {
      return (
        <>
          <Toggle checked label="Disabled on" disabled />
          <Toggle checked={false} label="Disabled off" disabled />
        </>
      );
    }
    ```
  </Tab>

  <Tab title="Preview">
    <ToggleDisabledPreview />
  </Tab>
</Tabs>

### Read Only

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { Toggle } from '@peppermint-design/devreadykit-custom';

    export default function ReadOnlyToggles() {
      return (
        <>
          <Toggle checked label="Read only on" readOnly />
          <Toggle checked={false} label="Read only off" readOnly />
        </>
      );
    }
    ```
  </Tab>

  <Tab title="Preview">
    <ToggleReadOnlyPreview />
  </Tab>
</Tabs>

## Props

| Prop           | Type                                                 | Default | Description                          |
| :------------- | :--------------------------------------------------- | :------ | :----------------------------------- |
| checked        | `boolean`                                            | —       | Checked state (controlled)           |
| defaultChecked | `boolean`                                            | `false` | Default checked state (uncontrolled) |
| onChange       | `(checked: boolean, event?: SyntheticEvent) => void` | —       | Change handler                       |
| label          | `React.ReactNode`                                    | —       | Label content                        |
| disabled       | `boolean`                                            | `false` | Disabled state                       |
| readOnly       | `boolean`                                            | `false` | Read only state                      |
| icons          | `boolean`                                            | `false` | Show default icons                   |
| iconChecked    | `React.ReactNode`                                    | —       | Custom checked icon                  |
| iconUnchecked  | `React.ReactNode`                                    | —       | Custom unchecked icon                |
| name           | `string`                                             | —       | Input name                           |
| className      | `string`                                             | —       | Additional CSS classes               |

## Examples

### Settings Panel

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { useState } from "react";
    import { Toggle } from '@peppermint-design/devreadykit-custom';

    export default function SettingsPanel() {
      const [settings, setSettings] = useState({
        darkMode: false,
        notifications: true,
        autoSave: false,
        analytics: true
      });

      const updateSetting = (key: string) => (checked: boolean) => {
        setSettings(prev => ({ ...prev, [key]: checked }));
      };

      return (
        <div className="space-y-4">
          <div className="space-y-3">
            <h3 className="font-medium">Preferences</h3>
            
            <Toggle
              checked={settings.darkMode}
              onChange={updateSetting('darkMode')}
              label="Dark mode"
              icons
            />
            
            <Toggle
              checked={settings.notifications}
              onChange={updateSetting('notifications')}
              label="Push notifications"
            />
            
            <Toggle
              checked={settings.autoSave}
              onChange={updateSetting('autoSave')}
              label="Auto-save documents"
            />
            
            <Toggle
              checked={settings.analytics}
              onChange={updateSetting('analytics')}
              label="Usage analytics"
            />
          </div>
        </div>
      );
    }
    ```
  </Tab>

  <Tab title="Preview">
    <ToggleSettingsPanelPreview />
  </Tab>
</Tabs>

### Feature Toggle

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { useState } from "react";
    import Toggle from "@/ui/toggle";

    type Feature = {
        id: string;
        name: string;
        description: string;
        enabled: boolean;
    };

    const initialFeatures: Feature[] = [
        {
            id: "beta-chat",
            name: "Beta Chat",
            description: "Enable the new AI-powered chat experience for selected users.",
            enabled: true,
        },
        {
            id: "advanced-analytics",
            name: "Advanced Analytics",
            description: "Unlock detailed analytics dashboards for product managers.",
            enabled: false,
        },
    ];

    export default function ToggleFeatureToggleExample() {
        const [features, setFeatures] = useState(initialFeatures);

        const toggleFeature = (id: string) => (checked: boolean) => {
            setFeatures((prev) =>
                prev.map((feature) =>
                    feature.id === id ? { ...feature, enabled: checked } : feature,
                ),
            );
        };

        return (
            <div className="w-full max-w-2xl space-y-4">
                {features.map((feature) => (
                    <div
                        key={feature.id}
                        className="flex items-center justify-between gap-4 rounded-md border border-gray-400 bg-white p-4"
                    >
                        <div>
                            <h4 className="font-semibold text-black">{feature.name}</h4>
                            <p className="text-sm text-gray-600">{feature.description}</p>
                        </div>
                        <Toggle checked={feature.enabled} onChange={toggleFeature(feature.id)} icons />
                    </div>
                ))}
            </div>
        );
    }

    ```
  </Tab>

  <Tab title="Preview">
    <ToggleFeatureTogglePreview />
  </Tab>
</Tabs>

### Form with Toggle

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { useState, type FormEvent } from "react";
    import { Toggle } from '@peppermint-design/devreadykit-custom';

    export default function NotificationForm() {
      const [formData, setFormData] = useState({
        email: '',
        sms: false,
        push: true,
        marketing: false
      });

      const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
        e.preventDefault();
        console.log('Notification preferences:', formData);
      };

      return (
        <form onSubmit={handleSubmit} className="space-y-4">
          <div>
            <label className="block text-sm font-medium mb-2" htmlFor="email">
              Email
            </label>
            <input
              id="email"
              type="email"
              value={formData.email}
              onChange={(e) => setFormData(prev => ({ ...prev, email: e.target.value }))}
              className="w-full px-3 py-2 border rounded"
              required
            />
          </div>
          
          <Toggle
            checked={formData.sms}
            onChange={(checked) => setFormData(prev => ({ ...prev, sms: checked }))}
            label="SMS notifications"
          />
          
          <Toggle
            checked={formData.push}
            onChange={(checked) => setFormData(prev => ({ ...prev, push: checked }))}
            label="Push notifications"
          />
          
          <Toggle
            checked={formData.marketing}
            onChange={(checked) => setFormData(prev => ({ ...prev, marketing: checked }))}
            label="Marketing emails"
          />
          
          <button type="submit" className="px-4 py-2 bg-blue-500 text-white rounded">
            Save Preferences
          </button>
        </form>
      );
    }
    ```
  </Tab>

  <Tab title="Preview">
    <ToggleFormPreview />
  </Tab>
</Tabs>