Switch
stableclientradix switch
A setting that takes effect the moment it's flipped. If the change only lands after a Save, it's a Checkbox.
Default
Anonymous. Nobody sees which pins are yours.
<Switch
label="Count my private pins in Beat"
defaultChecked
hint="Anonymous. Nobody sees which pins are yours."
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label* | ReactNode | — | Visible label. |
| checked | boolean | — | Controlled state. |
| onCheckedChange | (checked: boolean) => void | — | Fires on change. |
Guidance
Do
- Label the thing being switched on, not the act: 'Weekly email', not 'Enable weekly email'.
Don't
- Don't pair a switch with a Save button — that's a contradiction the user has to resolve.
Accessibility
role=switch with aria-checked, so it's announced as on/off rather than checked.
The thumb moves, but state is also carried by the track colour and the announced value.