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.
Ask your AI
Go through every toggle switch in the screen/code I'm pasting below. A toggle is only for on/off settings that apply the instant you press them with no save button — so if a toggle sits inside a form that has its own save button, flag it and suggest a checkbox instead. If a toggle is used for something risky or hard to undo, like deleting an account, mark that instant-apply as dangerous and swap in a button with a confirmation dialog. Rule each toggle 'keep / make it a checkbox / use another pattern' and lay out the reasons in a table.
Build an accessible toggle switch for [what it controls — e.g. dark mode, push notifications]. Don't lean on background color alone for the state — slide the knob all the way to the right when it's on so users who can't easily tell colors apart can read it at a glance from position. Add role="switch" and aria-checked so screen readers announce the state, and label it with the feature name like "Push notifications" rather than a state name like "On." Make it apply instantly as an on/off control, and give me the finished code in HTML/CSS/JS (or the framework I name).
In the toggle code I'm pasting below, if the state is signaled only by a green/gray background, add a clear position cue so the knob slides fully to the right when on, letting color-blind users read the state. If the label is a state name like "On"/"Off," change it to the feature name like "Push notifications" and let the knob's position and color carry the state. Add role="switch" and aria-checked if they're missing for screen readers. Summarize what you changed and why, then give me the updated code.