components
Switch
A switch applies its change the moment it's flipped. If the user has to hit Save afterwards, you wanted a checkbox.
Read the full specDefault
44×24 track with a 20×20 thumb. Toggle with Space or Enter when focused.
tsx
<div className="flex items-center gap-3">
<Switch id="push" defaultChecked />
<Label htmlFor="push">Push notifications</Label>
</div>Controlled
Drive the switch from state. The copy beside it updates live as you toggle.
We'll ping you as soon as a report lands.
tsx
const [on, setOn] = useState(true);
<Switch checked={on} onCheckedChange={setOn} />Disabled
Disabled switches fade to 50% opacity and become unreachable by keyboard and pointer.
Settings list
The typical home — a right-aligned switch on a row with a label and helper. The whole row is read by a screen reader as a single control.
Fire when a new area is added to your organisation.
A Monday-morning summary email of last week's activity.
Play a short chime when a critical alert arrives.