Toggle
A toggle shows whether a setting is on or off, and switches between the two.
When to use
- A setting that takes effect the moment it is changed, with no save step.
- Something clearly on or off, where the label makes both states obvious.
- A preference people 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 people should confirm first, since a toggle acts immediately.
- Two named options such as monthly and yearly. Use radio buttons so both names are visible.
- Agreeing to terms. That needs a deliberate action and a record.
Guidance
Do
Name the setting and let the toggle show the state. It takes effect at once, so there is no save button.
Don't
Do not put the action or a negative in the label. With Turn off automatic assignment as the label, people cannot tell what on or off means.
Intensity
How much attention each of this component's grounds uses, scored 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. Demanded is declared, and its use is limited. So neither of those two depends on the component alone. 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.