Forms & Input
Toggle Switch
Toggle switch is a control that flips between two states, on and off, applying the setting the instant you press it.
Definition
A toggle switch is a control that moves between just two states: on and off. Like a light switch, it flips the moment you press it, and that change takes effect right away. Inside is a small knob that slides left or right, and both the knob's position and the background color shift together to show whether you're currently on or off. The defining trait that sets a toggle apart from other inputs is this: you never have to press a save button, because the setting applies at the exact instant you touch it. For that reason, a toggle only fits situations where the answer is always one of two choices — a plain, simple on and off.
Why does it matter?
A toggle works beautifully for settings where the user wants to see the result immediately. When you turn a notification on or switch to dark mode, the outcome appears the instant you press, which reassures the user that their action actually landed. This immediacy makes a settings screen feel light and clear. But because the change applies right away, a toggle is a poor fit for risky actions that are hard to undo. It's also a problem when the state is conveyed by color alone: someone who can't easily distinguish colors will have no way of telling on from off. That's why it matters so much to also express the state through position or shape, so anyone can read it. A well-built toggle lets people sense both the current state and what will happen next, without a single word of explanation.
Common mistakes
- Placing a toggle inside a form that has its own save button, mixing apply-instantly with apply-after-saving. The user believes the setting took effect the moment they flipped the toggle, but if nothing happens until they press save, they end up with a setting they thought was on that is actually off.
- Showing the on state through color alone. To a user with color vision deficiency, green and gray can look nearly identical, leaving them unable to tell whether the switch is currently on or off.
- Writing the label next to the toggle as a state name. If it just says "On," it's unclear whether pressing the switch turns something on or off. The label should carry the feature's name, and the knob should show the state.
Practical tips
- Use a toggle only for on/off settings that apply instantly, with no saving step. It fits places where the result should appear right away, like turning notifications on or off; for form fields that go together with a save button, a checkbox is the better choice.
- Don't signal the state with color alone — express it through the knob's position too. If the knob slides all the way to the right when it's on, even users who struggle to distinguish colors can read the state at a glance from position alone.
- Make the label beside the toggle name the feature, not the current state. Writing "Push notifications" instead of "On" makes it clear at a glance what this switch turns on and off. The state is already shown plainly by the knob's position and color, so there's no need to repeat it in the label.