Toggle switch for on/off states.
| Name | Type | Default | Description |
|---|---|---|---|
| checked | boolean | — | Controlled checked state |
| defaultChecked | boolean | — | Default checked state |
| disabled | boolean | — | Disable switch |
| size | "default" | "sm" | — | Size variant for different contexts |
| Property | Token | CSS Variable | Description | |
|---|---|---|---|---|
| Track (Off) | color.input | var(--input) | Unchecked track color | |
| Track (On) | color.primary | var(--primary) | Checked track color | |
| Thumb | color.background | var(--background) | Thumb color | |
| Focus Ring | color.ring | var(--ring) | Focus indicator | |
| Disabled Track (On) | color.muted | var(--muted) | Disabled checked track color (grey) | |
| Disabled Opacity | opacity.50 | 0.5 | Reduced opacity when disabled |
A simple toggle switch for binary settings.
<Switch aria-label="Enable feature" />
Available size variants.
<div className="space-y-4">
<div className="flex items-center space-x-2">
<Switch id="size-default" />
<Label htmlFor="size-default" className="cursor-pointer">
Default size
</Label>
</div>
<div className="flex items-center space-x-2">
<Switch id="size-small" size="sm" />
<Label htmlFor="size-small" className="cursor-pointer text-sm">
Small size
</Label>
</div>
<div className="flex items-center space-x-2">
<Switch id="size-large" size="lg" />
<Label htmlFor="size-large" className="cursor-pointer">
Large size
</Label>
</div>
</div>Pair switches with labels for better accessibility.
<div className="flex items-center space-x-2">
<Switch id="notifications" />
<Label htmlFor="notifications" className="cursor-pointer">
Enable notifications
</Label>
</div>Manage switch state externally with checked and onCheckedChange.
Status: Off
const [airplane, setAirplane] = useState(false);
<div className="space-y-2">
<div className="flex items-center space-x-2">
<Switch id="airplane" checked={airplane} onCheckedChange={setAirplane} />
<Label htmlFor="airplane" className="cursor-pointer">
Airplane Mode
</Label>
</div>
<p className="text-sm text-muted-foreground">
Status: <code className="bg-muted px-1 rounded">{airplane ? 'On' : 'Off'}</code>
</p>
</div>Disabled switches for read-only or unavailable settings.
<div className="space-y-3">
<div className="flex items-center space-x-2">
<Switch id="disabled-off" disabled />
<Label htmlFor="disabled-off" className="cursor-not-allowed opacity-50">
Disabled (off)
</Label>
</div>
<div className="flex items-center space-x-2">
<Switch id="disabled-on" disabled defaultChecked />
<Label htmlFor="disabled-on" className="cursor-not-allowed opacity-50">
Disabled (on)
</Label>
</div>
</div>Settings pattern with label and description text.
Switch between light and dark themes.
Use smaller spacing and font sizes.
<div className="space-y-4 max-w-md">
<div className="flex items-center justify-between rounded-lg border p-4">
<div className="space-y-0.5">
<Label htmlFor="dark-mode" className="cursor-pointer">Dark mode</Label>
<p className="text-sm text-muted-foreground">
Switch between light and dark themes.
</p>
</div>
<Switch id="dark-mode" />
</div>
<div className="flex items-center justify-between rounded-lg border p-4">
<div className="space-y-0.5">
<Label htmlFor="compact" className="cursor-pointer">Compact mode</Label>
<p className="text-sm text-muted-foreground">
Use smaller spacing and font sizes.
</p>
</div>
<Switch id="compact" />
</div>
</div>