Toggle Switch
A control for a setting that is on or off and takes effect the moment it is flipped.
UI ComponentsA toggle promises immediacy. Flipping it should change the system now, with no Save. That promise is the only thing separating it from a checkbox, and breaking it — a panel of toggles with a Save button at the bottom — leaves people unsure which of their changes are already live.
Immediacy creates two obligations the checkbox does not have. The change can fail, so the toggle needs a pending state and has to revert visibly if the request does not land. And it is hard to be sure which end is “on” from the handle position alone, so the label must state what being on means — “Email notifications”, not “Enabled” — and never rely on colour as the only state indicator.
In practice
A dashboard's notification toggles fired requests with no pending or failure state. When the endpoint was down, toggles flipped visually and silently reverted on reload. Users believed alerts were off and were surprised by emails. Adding an optimistic flip, a pending state and a revert-with-message removed the complaint class.
Where teams get it wrong
- Toggles in a form with a Save button, so nobody knows what is already applied.
- No pending or error state, leaving the UI claiming a change that never saved.
- Labels like “Enabled” that do not say what is being enabled.
- Colour as the only on/off signal.
- A toggle for a destructive or expensive action with no confirmation.
Learn more
You may ask
Frequently Asked Questions
What is the difference between a toggle and a checkbox?
A toggle applies immediately; a checkbox is a stated intention that takes effect on save. If your settings screen has a Save button, those controls should be checkboxes.
Do toggle switches need labels?
Yes, and the label must describe what “on” means. Handle position alone is ambiguous across platforms, and on/off text inside the track is usually too small to read at a glance.
Related terms
All terms- CheckboxA control for independent on/off choices, any number of which can be selected at once — including none.
- Form DesignDesigning the fields, sequence, validation and error handling of a form so people can finish it without stopping to think.
- Status IndicatorA persistent signal of a system or record's current condition — distinct from a message about something that just happened.
- Radio ButtonA control for choosing exactly one option from a visible, mutually exclusive set.
Defined by Mara Last reviewed .
Let's talk about your product.
Happy to look at what you're building and say where design would move the needle.
Contact Us