Switch
A setting that takes effect the moment it flips. Ink track when on, a 20% tint when off, no status hue. Source: src/components/ui/switch.tsx.
With a label
Label it with htmlFor. The result is immediate, so say what changed right away; the status line below updates as you flip it.
Running. Scheduled runs go ahead.
Sizes
Default for settings pages; sm only inside a menu row, where the default would crowd the text.
default · 18×32
sm · 14×24
States
Off lifts its tint on hover; focus draws an offset ring. The thumb slides on the instant duration.
off
on
disabled · off
disabled · on
Settings list
The common layout: label and hint on the left, switch on the right, a hairline between rows. The hint is linked with aria-describedby.
Email and in-app.
The agent drafts; you approve.
Used to personalise replies.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "default" | "sm" | "default" | default is an 18×32 track; sm is 14×24 for a row inside a menu. Mirrored as data-size. |
| checked | boolean | — | Controlled state. |
| defaultChecked | boolean | — | Uncontrolled initial state. |
| onCheckedChange | (checked: boolean) => void | — | Fires on click, Space and Enter. |
| disabled | boolean | false | 50% and not-allowed; a following Label fades with it. |
| ...props | ComponentProps<typeof SwitchPrimitive.Root> | — | name, value and required post with a form. className merges last. There is no invalid style: a switch should never be in an error state. |
Best practices
When to use
- A setting that applies immediately: notifications, pause, show archived.
- A choice saved later with a form's Save button is a Checkbox.
Behavior
- Never put a switch in a form that needs a Save; people expect it to act at once.
- If the change is slow or fails, revert the switch and say why, rather than leaving it on.
- No validation state: a switch is always valid.
Accessibility
- Radix renders role="switch" with aria-checked; a Label with htmlFor gives it a name.
- sm is 14px tall; the clickable Label is what makes it usable on touch.
- Space and Enter toggle it.
Content
- The label names the setting when on: Ask before sending email. Avoid On/Off text beside it.