Switch
A two-state toggle for turning a single setting on or off, applying its effect immediately without a separate submit. A track and thumb, sized so the state reads at a glance without a label. Use it for binary preferences (notifications, dark mode); prefer a Checkbox when the value is part of a form the user must submit.
On and off
The one control that keeps a raw bg-primary fill. Its chip-sized track *is* its state with no label inside to help, so it has to be louder than any surface to read as on or off — every other chosen state in the system uses bg-selected instead.
<Switch />
<Switch checked />
<Switch disabled />
<Switch checked disabled />Settings rows
A switch belongs in a row that says what it turns on. Label on the left, control on the right, so a column of them scans as a list of settings rather than a column of chips.
<div class="flex w-64 flex-col gap-4">
<label class="flex items-center justify-between text-sm">
<span>Email alerts</span>
<Switch checked />
</label>
<label class="flex items-center justify-between text-sm">
<span>Push notifications</span>
<Switch />
</label>
<label class="text-muted flex items-center justify-between text-sm">
<span>SMS (unavailable)</span>
<Switch disabled />
</label>
</div>API
| Prop | Type | Default | Description |
|---|---|---|---|
checked bindable | boolean | false | Bindable on/off state of the switch. |
class | string | Extra Tailwind classes merged onto the track element. | |
disabled | boolean | Prevents interaction and dims the track (forwarded via | |
onCheckedChange | (checked: boolean) => void | Fires with the new boolean when the state changes (forwarded via |