Toggle Switch

A toggle switch provides an immediate on/off control that takes effect right away, with its current state communicated visually and through ARIA attributes for assistive technology.

Demo

Click or tap the toggle to switch it between on and off. Then tab to it with the keyboard and press Space to activate it. Listen with a screen reader to confirm that the new state — "on" or "off" — is announced immediately after each interaction without requiring a page reload or form submission.

Enable notifications

Dark mode

Auto-save drafts Automatically save your work every 30 seconds.

Experimental features

What to Observe

The toggle has a persistent visible label that identifies what setting it controls — the label does not disappear when the switch is activated.
A screen reader announces the label and the current state (on or off) when focus lands on the control.
Activating the toggle immediately announces the new state without requiring focus to leave and return.
The visual difference between on and off states is communicated through more than color alone — position or shape also changes.
The control is reachable and operable by keyboard using Space or Enter without any mouse interaction.

Anatomy

[Anatomy image placeholder — will be added when assets are available]

Label: A visible text label identifying what the toggle controls, persistently displayed regardless of the current state.
Track: The elongated pill-shaped background element that visually represents the switch housing; its fill color typically changes between states.
Thumb: The circular element that slides left (off) or right (on) within the track to indicate the current state.
State indicator: Optional text inside or beside the track ("On" / "Off") providing an additional non-color cue for the current state.
Interactive control: The underlying button or checkbox element that receives focus, carries the ARIA switch role and checked state, and handles keyboard activation.

Accessibility Behavior

The control must use role="switch" and aria-checked set to true or false to communicate state to assistive technology.
The label must be programmatically associated with the control so screen readers announce what the toggle controls, not just its state.
The current state must update immediately on activation, and the change must be announced to screen readers without a page reload.
The toggle must be operable by keyboard — pressing Space must toggle the state when the control has focus.
On and off states must be distinguishable through visual cues beyond color, such as the thumb position or supplementary text labels.
The control must have a visible focus indicator with sufficient contrast so keyboard users can identify where focus is.

Common Mistakes

Building the toggle as a styled <div> with a click handler but no role, label, or keyboard support, making it completely inaccessible.
Using only background color to differentiate the on and off states, which fails users with color vision deficiencies.
Omitting the label or placing it in a way that is not programmatically associated, so screen readers only announce "switch, on" without context for what is being toggled.
Requiring a form submission to apply the toggled state, which contradicts the expected immediate-effect behavior of a switch.
Not updating aria-checked when the visual state changes, leaving screen readers stuck reporting the old state.

Why This Matters

Toggle switches appear in settings panels, feature flags, notification preferences, and privacy controls — all places where users need to make quick binary decisions. A toggle that communicates its state only through visual position or color gives blind users and keyboard-only users no way to know whether a setting is on or off. In critical contexts like privacy permissions or accessibility settings, this is not just an inconvenience — it means users cannot make informed choices about their own experience. Implementing the switch role and live state updates closes that gap entirely.

Accessibility Validation

This component is validated against internal accessibility criteria aligned with WCAG standards, using our internally developed system, Resonance Specs.

To learn more, please contact us.