Design Pattern

Switch

A switch is a pattern for toggling a setting on or off with immediate effect. Even though it looks similar to a checkbox, its semantics are different. Use it only for settings that take effect the moment they change.

Difficulty: Beginner Category: Forms

When to use / not use

Use it when

  • Toggling on/off for things like notifications, visibility settings, or autoplay
  • When the change takes effect immediately
  • When you want to convey a binary state intuitively

Don't use it when

  • Consent confirmation before submit → use a checkbox
  • Picking one of several options → use radio buttons
  • When state changes wait for a save button → a checkbox matches the semantics better

Anatomy

1 Visible label
2 Checkbox-based input
3 Track and thumb
4 Text that reinforces the current state
  1. Label — Clearly states what setting this is. "On / Off" alone is not enough
  2. Input — Base it on a native checkbox, and add role=switch when needed
  3. State — Reinforce current state not just through color and position but with text as well

HTML Structure

Key points

  • Use input type=checkbox as the underlying element
  • Layer the visual switch UI on top with CSS
  • Make the entire label clickable to ensure a good tap area
  • Communicate in context that changes take effect immediately

CSS Implementation

Points the visuals should reinforce

  • Off — Use a color and thumb position that make the off state obvious at a glance
  • On — Differentiate both via track color and thumb position
  • Focus — Always show a ring during keyboard operation
  • Disabled — Keep contrast while making it look non-interactive

Accessibility

WCAG 1.3.1 Info and Relationships

The relationship between the setting name and the switch must be clear in the label.

WCAG 2.1.1 Keyboard

It must be toggleable with Space and the focus position must be visible.

WCAG 4.1.2 Name, Role, Value

The current on/off state must be conveyed to assistive technology.

Keyboard operation

  • Use Tab to move focus to the switch
  • Toggle on/off with Space
  • It helps if surrounding text or screen state also updates on change

Live Demo

Basic switch

The most basic switch that toggles a single setting on/off.

PreviewFullscreen

Settings list

A pattern for settings screens that toggles multiple immediate-effect settings in a list.

PreviewFullscreen

Comparing use cases

A comparison of situations where a switch is appropriate versus where a checkbox should be used.

PreviewFullscreen

Common mistakes

Using a switch for consent

"Turning a setting on" and "agreeing to terms" have different meanings.

No label, relying on a nearby heading

A switch where you can't tell what it toggles can't be operated.

Conveying state with color alone

Thumb position and reinforcing text should also differentiate state.