Switch

Preview

When to use

Use a switch for binary settings that take effect immediately — no form submission required. Examples:

• Enabling or disabling notifications.
• Turning a feature on or off in a settings panel.
• Activating or deactivating an account preference.

When not to use

• Don't use a switch when the change requires confirmation before taking effect — use a Checkbox in a form with a save action.
• Avoid switches for multi-option choices — use Radio or Select.
• Don't use a switch as a form field that is submitted with other data unless the design intentionally defers the effect to form submission.
• If it’s a question where the user is making a choice (even if it’s just yes/no), use Radio.

Behaviour

Clicking or tapping the switch toggles it between checked (on) and unchecked (off). The change takes effect immediately.

The label describes what the switch controls — not what it will do when toggled. It should be clear in both states (e.g., "Dark mode" is better than "Enable dark mode").

If you’re choosing between switch and radio: a switch is a setting (a state of the product). A radio group is a choice the user answers.

Anatomy

• Track — the pill-shaped background. Visually different in checked vs. unchecked states (typically green vs. grey).
• Thumb — the circular handle that slides within the track to indicate the current state.
• Label — describes the setting being controlled. Typically placed to the right of the switch.

Variants

• Default (interactive) — the switch can be toggled by the user.
• Read only — the switch displays the current state but cannot be changed by the user. The current value is preserved and visible.

Both variants are available in Checked and Unchecked states.

States

• Unchecked (off) — the feature or setting is inactive; the thumb is on the left.
• Checked (on) — the feature or setting is active; the thumb is on the right.
• Hover — the track highlights when the cursor moves over the switch.
• Focus — a visible focus ring appears when the switch is navigated via keyboard.
• Read only — the switch shows the current state but is not interactive.
• Disabled — the switch is non-interactive and visually reduced, in either checked or unchecked state.

Placement & layout

Switches sit inline with their label. The label should appear to the right of the switch for standard left-to-right layouts.

In a settings list, align all switches to the same edge (typically right-aligned) with the label to the left. Keep a consistent tap target height — the entire label-and-switch row should be tappable, not just the toggle itself.

Accessibility

• The switch must use role="switch" with aria-checked="true" or aria-checked="false" to communicate its current state.
• The switch must have an accessible label — either a visible <label> element or aria-label.
• Keyboard: Tab to focus, Space to toggle.
• State changes must be announced immediately to screen readers. Because the switch is role="switch", changing aria-checked handles this automatically.
• Read-only switches should use aria-readonly="true" and communicate to screen readers that the control cannot be changed.

Related components

• Checkbox — for deferred binary choices in a form context.
• Radio — for selecting one option from a set of mutually exclusive choices.