Toggle Switch
Also called switch, on/off, toggle button
A control with two states that takes effect the moment it is flipped, with no separate confirmation.
Example
Applies immediately
No Save button, because there is nothing to save — the change is already live.
Flip a switch — each change lands here instantly.
Applies on save
The same two-state answers, but they are form values. Checkboxes say so; switches here would claim an effect that has not happened.
Nothing to save.
When to use it
- The change applies straight away — dark mode, notifications, a feature flag in a settings panel.
- The state is a system condition rather than a value being collected: something is on or it is off.
- The user may flip it repeatedly to see the effect, so a round trip through a Save button would be in the way.
When not to
- It sits in a form with a submit button. Then it is a checkbox, because nothing happens until submit.
- The action is destructive or expensive. Instant effect plus no confirmation is a bad combination.
- You need a third state. A switch cannot be indeterminate; a checkbox can.
Trade-offs
- The state is readable at a glance without reading the label twice.
- No submit step, so the feedback loop is as short as it gets.
- Familiar from every phone settings screen.
- Because it applies instantly, an accidental flip is an accidental change — and undo is rarely offered.
- Ambiguous labels are worse here than anywhere: “Disable notifications” next to a switch has two readings.
- Cannot express “partially on”, so it does not scale to parent/child settings.
Accessibility
What this pattern needs in order to work for everyone.
- Keyboard
- Space toggles it. Enter should not — that is the checkbox convention and switches follow buttons.
- One tab stop. The visual track and thumb are decoration; the control is the whole thing.
- Roles and state
- `role="switch"` with `aria-checked`, so a screen reader says “on” and “off” rather than “checked”.
- The label must state what is on, not what the button does: “Email notifications”, not “Turn on email notifications”.
- If flipping it kicks off something slow, say so — a live region announcing “Saved” beats silence.
- Check where your library puts the `id`. Most headless switches render a visible element plus a hidden `aria-hidden` input, and give the `id` to the input — so a `<label for>` names something no screen reader can reach. Point `aria-labelledby` at the label as well.
- Focus
- Focus stays on the switch after flipping. Never move focus as a side effect of a state change the user just made deliberately.
In the wild
- iOS Settings — The reference implementation: every switch applies immediately and there is no Save button anywhere.
- GitHub repository settings — Switches for instant flags, checkboxes inside forms that need saving — the two are used correctly side by side.
Compared with
Side-by-side breakdowns of patterns that solve a similar problem.