# CustomToggle

A highly customizable toggle component that allows you to define custom content for both the on and off states. This component provides a flexible alternative to the standard Toggle component by letting you specify what content appears in each state, making it perfect for scenarios where you need more than just basic on/off visual states.

## Aliases

- CustomToggle
- CustomSwitch
- ContentToggle

## Props Breakdown

**Extends:** `ControlledFormComponentProps<boolean>`

| Prop | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| `offContent` | `ReactNode` | `undefined` | No | Content to show when toggle is off |
| `onContent` | `ReactNode` | `undefined` | No | Content to show when toggle is on |
| `className` | `string` | `undefined` | No | Additional className for the toggle |
| `initialValue` | `boolean` | `undefined` | No | The initial value for the field |
| `checked` | `boolean` | `undefined` | No | The initial value for the field |
| `value` | `boolean` | `undefined` | No | The current value of the form field |
| `onValueChange` | `(value: boolean) => void` | `undefined` | No | Callback function that is called when the field value changes |
| `disabled` | `boolean` | `false` | No | Whether the form field is disabled and cannot be interacted with |
| `required` | `boolean` | `false` | No | Whether the form field must have a value |
| `invalid` | `boolean` | `false` | No | Whether the form field's current value is invalid |
| `id` | `string` | `undefined` | No | Id for the form field |

## Examples

### Basic Custom Toggle

```tsx
import { CustomToggle } from '@delightui/components';

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

  return (
    <CustomToggle
      value={isEnabled}
      onValueChange={setIsEnabled}
      offContent="Disabled"
      onContent="Enabled"
    />
  );
}
```

### Custom Toggle with Icons

```tsx
import { CustomToggle, Icon } from '@delightui/components';

function IconCustomToggleExample() {
  const [isVisible, setIsVisible] = useState(false);

  return (
    <CustomToggle
      value={isVisible}
      onValueChange={setIsVisible}
      offContent={<Icon name="VisibilityOffFilled" />}
      onContent={<Icon name="VisibilityOnFilled" />}
    />
  );
}
```

### Custom Toggle with Rich Content

```tsx
import { CustomToggle, Text } from '@delightui/components';

function RichContentToggleExample() {
  const [isActive, setIsActive] = useState(false);

  return (
    <CustomToggle
      value={isActive}
      onValueChange={setIsActive}
      offContent={
        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
          <Text size="small" color="error">OFF</Text>
          <span>🔴</span>
        </div>
      }
      onContent={
        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
          <Text size="small" color="success">ON</Text>
          <span>🟢</span>
        </div>
      }
    />
  );
}
```

### Form Integration

```tsx
import { Form, FormField, CustomToggle, Button } from '@delightui/components';

function FormIntegrationExample() {
  const handleSubmit = (data: any) => {
    console.log('Form submitted:', data);
  };

  return (
    <Form onSubmit={handleSubmit}>
      <FormField
        name="notifications"
        label="Email Notifications"
        required
      >
        <CustomToggle
          offContent="Notifications Off"
          onContent="Notifications On"
        />
      </FormField>

      <FormField
        name="darkMode"
        label="Dark Mode"
      >
        <CustomToggle
          offContent="☀️ Light"
          onContent="🌙 Dark"
        />
      </FormField>

      <Button type="submit">
        Save Settings
      </Button>
    </Form>
  );
}
```

### Disabled State

```tsx
import { CustomToggle } from '@delightui/components';

function DisabledCustomToggleExample() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
      <CustomToggle
        disabled
        value={false}
        offContent="Cannot Enable"
        onContent="Enabled"
      />
      
      <CustomToggle
        disabled
        value={true}
        offContent="Disabled"
        onContent="Cannot Disable"
      />
    </div>
  );
}
```

### Custom Styling

```tsx
import { CustomToggle } from '@delightui/components';

function StyledCustomToggleExample() {
  const [isOn, setIsOn] = useState(false);

  return (
    <CustomToggle
      value={isOn}
      onValueChange={setIsOn}
      className="custom-toggle-styles"
      offContent="Start"
      onContent="Stop"
    />
  );
}
```

### Multiple Custom Toggles

```tsx
import { CustomToggle } from '@delightui/components';

function MultipleCustomTogglesExample() {
  const [settings, setSettings] = useState({
    sound: false,
    vibration: false,
    bluetooth: false
  });

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

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
        <span>Sound:</span>
        <CustomToggle
          value={settings.sound}
          onValueChange={(value) => updateSetting('sound', value)}
          offContent="🔇 Muted"
          onContent="🔊 On"
        />
      </div>

      <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
        <span>Vibration:</span>
        <CustomToggle
          value={settings.vibration}
          onValueChange={(value) => updateSetting('vibration', value)}
          offContent="📱 Off"
          onContent="📳 On"
        />
      </div>

      <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
        <span>Bluetooth:</span>
        <CustomToggle
          value={settings.bluetooth}
          onValueChange={(value) => updateSetting('bluetooth', value)}
          offContent="Disconnected"
          onContent="Connected"
        />
      </div>
    </div>
  );
}
```

### Controlled vs Uncontrolled

```tsx
import { CustomToggle } from '@delightui/components';

function ControlledVsUncontrolledExample() {
  const [controlledValue, setControlledValue] = useState(false);

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
      {/* Controlled */}
      <div>
        <h4>Controlled CustomToggle</h4>
        <CustomToggle
          value={controlledValue}
          onValueChange={setControlledValue}
          offContent="Controlled Off"
          onContent="Controlled On"
        />
      </div>

      {/* Uncontrolled with initial value */}
      <div>
        <h4>Uncontrolled CustomToggle</h4>
        <CustomToggle
          initialValue={true}
          offContent="Uncontrolled Off"
          onContent="Uncontrolled On"
        />
      </div>
    </div>
  );
}
```