Switch
An on/off toggle for a setting that takes effect immediately. The track turns accent-green when on; the thumb position follows the data-checked state, so the DOM is the single source of truth.
States
<Switch aria-label="Off" /><Switch aria-label="On" defaultChecked /><Switch aria-label="Disabled" disabled />With a label
<label className="flex items-center gap-3"> <Switch defaultChecked /> Auto-approve low-risk orders</label>Props
| Prop | Type | Default | Notes |
|---|---|---|---|
checked / defaultChecked | boolean | — | Controlled or initial state. |
onCheckedChange | (checked) => void | — | Called on toggle. |
disabled | boolean | — | Blocks interaction. |
name / required | — | — | Standard form wiring. |