Toggle
buttons.
Toggles flip something on or off. Segmented controls pick one of several mutually exclusive options. They live in a strange space between buttons and form controls — but with the right pattern, they're some of the clearest interactions in eLearning.
Switching state immediately.
A toggle's action takes effect the moment the learner clicks — no submit, no save. That's the defining behaviour. Used right, toggles feel responsive and direct. Used wrong, they confuse learners about whether their choice was actually applied.
- On/off switches for settings (audio, captions, accessibility options).
- Segmented controls for mutually exclusive views or modes.
- Filter pills that include or exclude content from a list.
- Display preferences like dark mode or font size.
Quiz answers or form submissions.
If the action needs a "submit" step, it's not a toggle. Use radio buttons for single-choice questions, checkboxes for multi-select, and primary buttons for actions that need confirmation.
- Quiz answers — use radio buttons.
- Multi-select selections — use checkboxes.
- Form submissions — use primary buttons.
- Destructive actions that need confirmation.
Two patterns.
The two most common toggle patterns in eLearning. The switch is for binary on/off. The segmented control is for one-of-many. Both apply immediately on click.
Toggle to enable captions on the course video.
Pick a font size. Notice the change applies immediately, with no "save" button.
The quick brown fox jumps over the lazy dog.
Both controls are built on native HTML inputs (checkbox and radio) for accessibility. The visual treatment is custom; the keyboard, screen-reader, and form behaviour comes for free.
Get the visuals right.
State is the whole game
A toggle's only job is to communicate "this is on" or "this is off". The active state has to be unmissable — different colour, different position, different texture. If a learner can't tell at a glance whether captions are on or off, the toggle has failed.
Don't rely on colour alone
Some toggles communicate state only with green vs grey. That fails for colour-blind users and on low-contrast screens. Combine colour with shape, position, or a fill pattern — the active state should be obvious even in black and white.
Segmented controls need clear active state
One option in a segmented control should be visibly "selected" — usually filled in dark colour while the others are outlined or muted. If all three options look equally weighted, the control becomes ambiguous.
Accessibility — use native inputs
Build switches on <input type="checkbox"> and segmented controls on <input type="radio">. Custom-built toggles using <div>s almost always break Tab, Space, and arrow-key behaviour. Native inputs handle this for free.
Accessibility — labels and announcements
Every toggle needs a visible label that explains what it does. The label should be clickable too — extends the tap target and helps anyone with imprecise pointer control. Screen readers will announce the label plus state ("Captions, off").
Animate the state change
A toggle that snaps between states feels broken; one with a 150ms slide or fade feels confident. The animation isn't decoration — it tells the learner their click was received and registered.
How to use toggles that don't confuse.
Apply immediately, always.
The reason to use a toggle (versus a checkbox + Submit) is that the change happens the moment the learner clicks. If your toggle requires a "Save changes" button, you've picked the wrong component. Pair toggles with instant effect, or use a different pattern.
Label what's on, not what the toggle does.
"Captions" beats "Show captions". "Dark mode" beats "Enable dark mode". The label describes the thing being controlled; the on/off state describes what the toggle is currently doing. "Turn off captions" inside the toggle gets confusing — is it currently on, or is that the action?
Confirm destructive toggles.
Most toggles are safe — captions, font size, dark mode. Some aren't. If a toggle disables features the learner might need ("Skip the assessment"), or resets state ("Reset progress on this scene"), pair it with a confirmation step or undo affordance. Toggles that immediately erase work are punishing.
Two options? Use a switch. Three to five? Use a segmented control.
Binary on/off = a switch. Three to five mutually exclusive options = a segmented control. Six or more options means the segmented control gets cramped — use radio buttons or a dropdown instead. The visual format should match the cognitive demand of the choice.
Don't mix toggles and submit forms on the same screen.
If half the controls on a screen apply immediately and half wait for a submit, learners lose track of which is which. Pick one model per screen — either everything is immediate (settings panel) or everything waits for submit (form). Mixing creates an "did my change apply?" moment that you can't afford.
Provide an undo path for important toggles.
"Skip remaining scenes" should let the learner come back. "Reduce reading load" should let them restore the full content. Toggles aren't quizzes — they're meant to be experimented with. A toggle that locks the learner out of changing their mind defeats the format.
Persist state across the course.
If a learner turns captions on in scene 1, captions should still be on in scene 12. Toggles that reset on every scene make learners adjust the same settings repeatedly — slow, irritating, and a sign the navigation state isn't being tracked properly.
When you'd reach for a toggle.
Accessibility preferences
Captions on/off, audio descriptions, dyslexic-friendly fonts. These are personal settings that need to apply immediately and persist across the course.
Display mode
Light/dark, or small/medium/large font. Segmented controls make this clean: three options, one selected, change applied immediately.
Filter pills in a resource library
"Show me: leadership / sales / for managers." Each pill toggles whether its category is included. Multi-select toggles are sometimes called "chip groups".
Module visibility settings
In adaptive courses, learners can switch on or off optional sections. A toggle ("Show advanced content") is the right pattern — instant application, easy to reverse.
Want a course
built well?
We apply these principles on every course we build. Three-week delivery, transparent pricing, zero drama.