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 plate
Reach for this when
- Settings that apply immediately.
- Binary on and off states.
Common mistakes
- Toggles inside forms that require saving.
- State conveyed by position and colour alone.
- No feedback when the change fails.
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.
Making the state unambiguous
Do
- Label the thing, not the state: Email notifications, not Enable email notifications.
- Apply the change immediately, and confirm it if the result is not visible.
- Use colour and position together, so the state survives greyscale.
- Give it a proper switch role, with the state announced.
Do not
- Put a toggle in a form that also has a Save button.
- Use one toggle for a setting with three states.
- Change the label as the state changes, so nobody can tell whether it describes now or next.
- Animate the change so slowly that people press it twice.
In practice
- i.
On, or the action to turn on
The classic ambiguityA switch labelled Mute beside a highlighted track leaves two readings: muted now, or press to mute. Labelling the subject and showing state only through the control removes the question.
- ii.
The toggle that needed saving
Mixed modelsA settings page with six toggles and a Save button taught nobody which of the two mattered. Half the readers left without saving, and the toggles had already looked as though they had taken effect.
Commonly confused with
Close neighbours that get substituted for each other. The difference is stated first, then the condition that picks one over the other.
Checkbox
ComponentA control that marks a value as selected, applied when the surrounding form is submitted.
Key difference
A checkbox records an intent that a later submit will apply. A toggle is the action: flipping it changes the system now, so it needs no Save and does need a way back.
Use Toggle Switch when
- The setting takes effect the moment it is flipped.
- The result is visible at once, or a status message says it saved.
- The change is cheap to reverse.
Use Checkbox when
- The change takes effect on submit, alongside other fields.
- The reader is choosing several things from a list.
- Leaving the page without saving should discard the change.
Local chart
CMP·007 · Region III · Grid E1
This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.
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.
- FeedbackPRIN·004 · Principle
- Natural MappingPRIN·008 · Principle
Often used with
These usually appear in the same screen or the same decision.
- Optimistic UIPAT·013 · Pattern
- Settings and PreferencesPAT·025 · Pattern