Toggle
A toggle is used to view or switch between enabled or disabled states.
When to use
- A setting that takes effect the moment it is changed, with no save step.
- Something genuinely on or off, where both states are obvious from the label.
- A preference a reader will come back and change.
When not to use
- A choice that needs submitting. That is a checkbox, inside a form with a save.
- Anything where the reader should confirm first, since a toggle acts immediately.
- Two named options such as monthly against yearly. Those are radios, where both names are visible.
- Agreement to terms, which needs a record and a deliberate act.
Guidance
Do
Name the thing being switched and let the toggle show the state. It takes effect at once, so there is no save.
Don't
Do not put the action or a negative in the label. Off against Turn off automatic assignment is unreadable in either position.
Intensity
What each of this component's grounds spends, measured against the ladder in both themes.
| Appearance | Ground | Light | Dark |
|---|---|---|---|
| toggle | neutral-bold | 0.462Marked | 0.582Marked |
| toggle | surface | 0.000Substrate | 0.000Substrate |
| toggle--checked | brand-bold | 0.460Marked | 0.598Marked |
| toggle--disabled | disabled | 0.042Ambient | 0.129Ambient |
Substrate, Ambient and Marked are measured. Directed depends on what else is in the region, and Demanded is declared and rationed, so neither is a property this component carries by itself. See intensity.
Content
What to write, and what to leave out.
- Name the setting, not the action. Automatic assignment, not Turn on automatic assignment.
- Never write a negative, because the toggle already has two states.
- Do not add On and Off beside it. The control shows that.