ComponentCraft conventionFoundational
Toggle Switch
An immediate on or off setting, which must actually take effect immediately.
Definition
A toggle switches a setting between two states and applies the change at once. It borrows a physical metaphor, which sets the expectation that the effect is instant.
Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.
On this page
Rules
- Apply immediately. A toggle inside a form with a save button is a checkbox wearing the wrong clothes.
- Label the setting, not the state. 'Email notifications' with a switch, not 'Notifications on'.
- Show state with more than position and colour: a check and cross, or an adjacent text state.
- Show a pending state if the change takes time, and revert visibly on failure.
- Use role switch with aria-checked, or a checkbox input styled as a switch.
Continue from here
Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.
Applies when you are designing
Principles behind this
The reasoning this solution is an application of.
- FeedbackPrinciple
- Natural MappingPrinciple
Often used with
These usually appear in the same screen or the same decision.
- Optimistic UIPattern
- Settings and PreferencesPattern
Commonly confused with
Close enough to be mixed up, different enough to matter.
- CheckboxComponent
A toggle takes effect immediately. A checkbox waits for submit.