Switch
An on/off setting that takes effect right away. A pill track with a sliding thumb. Not a Checkbox.
Master
Switch size and toggle checked, hidden label and disabled. The switch itself flips too.
Get an email when an invoice is paid.
Usage
Use Switch in settings rows for preferences that apply as soon as they flip, like email notifications or auto-pay. The label sits first and the track last; a labeled Switch fills its row, so a stack of them reads as a settings list. description adds a second line. For choices saved with a form button, or agreeing to terms, use Checkbox. See contracts/switch.json for the full contract.
Do's
- Settings that apply right away, like notifications or dark mode.
- Turning a feature on or off in a settings list.
Don'ts
- Do not invent Toggle, ToggleGroup, SwitchGroup or a local pill switch.
- Do not use for choices that wait for a Save button, or for agreeing to terms. Use Checkbox.
- Do not use for picking one of several options. Use RadioGroup.
- Do not change the label text when it flips. The track shows the state.
- Do not use raw hex.
<Switch label="Email notifications" description="Get an email when an invoice is paid." size="md" checked />