# Switch

**When to use:** Sliding boolean toggle — settings panels, feature flags, preference lists. Same shape as `Checkbox` but visually a track + thumb; prefer `Switch` when the effect is immediate (e.g. enabling a setting) and `Checkbox` for selections inside a form that gets submitted. A settings panel with a Save button is such a form, but a user who asks for toggles still means a `Switch`: the two have the same shape.

**Keywords:** toggle switch, on off switch

**Import:** `import { Switch } from '@ahrowe/ui'`

```tsx
import { Switch, FormValidator } from '@ahrowe/ui';

// Controlled: Switch keeps no state of its own, so pass `selected` and `onToggle` together (or a formValidator)
<Switch
  label="Dark mode"
  selected={darkMode}
  onToggle={(isOn) => setDarkMode(isOn)}
/>

// With FormValidator
const notifyValidator = new FormValidator(false);
<Switch label="Email notifications" formValidator={notifyValidator} />

// Disabled
<Switch label="Locked setting" selected={true} disabled />

// Resize — all dimensions are in `em`, so font-size scales the whole switch
<Switch label="Large" selected={true} onToggle={() => {}} style={{ fontSize: '20px' }} />

// Or resize just the track via the slot, independent of the label
<Switch
  label="Custom track size"
  selected={true}
  onToggle={() => {}}
  styles={{ track: { width: '3em', height: '1.5em' } }}
/>
```

**Key props:**

| Prop | Type | Description |
|------|------|-------------|
| `label` | `string` | Text beside the switch |
| `selected` | `boolean` | On/off state |
| `onToggle` | `(isToggled: boolean, event?) => void` | Change handler |
| `formValidator` | `FormValidator` | Connects to form validation |
| `disabled` | `boolean` | |
| `children` | `ReactNode` | Custom label content (overrides `label`) |
| `tabIndex` | `number` | |
| `ref` | `Ref<HTMLDivElement>` | Ref to the root element |

**Sizing:** the track and thumb are dimensioned in `em`, so the whole switch scales with the inherited `font-size` — no dedicated size prop. Use `style={{ fontSize: ... }}` to scale everything together, or the `track`/`thumb` slots (`classNames`/`styles`) to resize just those parts.

**Slots:** `track` `thumb` `label`