Switch
·Updated April 6, 2026
Overview
A switch controls a single persistent setting that is either on or off. Toggling it takes effect immediately, with no save or confirmation step required.
Sandbox
Anatomy
- Track — The pill-shaped surface that indicates on/off state through fill color.
- Thumb — The circular handle that slides left or right to reflect the current state.
- Label (optional) — Text describing what the switch controls. Provided via Input Control Group.
Usage
Use a switch when the user is controlling a persistent setting that should take effect immediately. The change must apply without a save action.
- Use when the concept naturally has two states: enabled/disabled, show/hide, allow/block.
- Use for user preferences and settings that remain active until manually changed.
- Don't use for one-time actions, confirmation flows, or anything that behaves more like a button.
Use a checkbox instead when the setting requires a save action to apply.
Best Practices
| Do | Don't |
|---|---|
| Use labels that describe a state, not an action (e.g., "High Contrast Mode") | Don't use action verbs like "Start," "Generate," or "Hide" |
| Confirm the label works with the phrase "Turn on…" | Don't use labels that break the "Turn on…" test |
| Use positive, state-based language (e.g., "Show active patients") | Don't use negative or double-negative phrasing (e.g., "Disable alerts," "Hide inactive") |
| Group related switches vertically | Don't place large sets of switches in toolbars; move them to settings panels |
| Use switches only for persistent settings that apply immediately | Don't mix switches with filtering or view controls — use checkboxes or tabs instead |
Accessibility
- Provide a clear accessible name via label or aria-labelledby.
- Ensure a visible focus indicator for keyboard interaction.
- Communicate state changes using aria-checked.
- Do not rely on color alone for “on” or “off.”
- Maintain readable contrast between thumb, track, and focus ring.