Components / Forms
Toggle
stableAn on/off switch for a setting that takes effect immediately — no separate save step.
States
In context — settings row
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
label | string | — | No | Label text, rendered next to the switch. |
checked | boolean | — | No | Controlled on/off state. |
disabled | boolean | false | No | Standard HTML disabled state. |
Do
- Use for a setting that applies the instant it’s toggled.
- Label it with the state it enables, not the action ("Email notifications", not "Toggle emails").
Don't
- Use a Toggle when the change needs a separate "Save" action — use Checkbox in a form instead.
- Rely on colour alone to communicate on/off — the thumb position already does.