Switch
Two-state toggle for a single setting that takes effect immediately — no Save step. Reach for it when the action is on/off and self-applying (notifications, airplane mode, dark mode); use Checkbox instead when the value is only committed on submit, and RadioGroup when picking one of several options. Monotone and single-size: checked fills with foreground, unchecked is secondary, and the thumb stays white in light mode.
Default
<div className="flex items-center gap-3">
<Switch id="airplane" />
<Label htmlFor="airplane">Airplane mode</Label>
</div>Disabled
<Switch disabled />
<Switch disabled defaultChecked />Props
| Prop | Type / note |
|---|---|
| checked | boolean — controlled |
| defaultChecked | boolean — uncontrolled initial state |
| onCheckedChange | (checked: boolean) => void |
| disabled | boolean |
| required / name / value | Standard form props (via Radix) |
Source
packages/react/src/components/switch.tsx · Figma node 2819:30733