Switch

Switches toggle a single setting on or off with immediate effect. Use them for binary choices that take effect without a submit action.

Open Switch Playground

Anatomy

1 2 3
  1. 1 Track — pill-shaped container
  2. 2 Thumb — circular indicator that slides between on/off
  3. 3 Label — describes the setting

Options

States

Off
Default
Hover
Focus
Disabled
On
Default
Hover
Focus
Disabled

Table of options

PropertyValuesDefault
labeltext—
checkedtrue / falsefalse
disabledtrue / falsefalse

Behaviors

Immediate effect

Toggling takes effect immediately — no submit needed.

Thumb animation

The thumb slides smoothly. The track color transitions to indicate the new state.

Keyboard focus

Adds a visible focus ring. Toggled with Space.

Usage guidelines

Switch vs. checkbox

Do

Use a switch for settings that take effect immediately.

Don't

Don't use a switch for form consent — use a checkbox.

Content standards

  • Write labels as the setting name: "Notifications" not "Turn on notifications".
  • Use sentence case. Keep to one line.

Keyboard interactions

KeyInteraction
SpaceToggles between on and off.
TabMoves focus to the next element.

Accessibility

  • Use <input type="checkbox" role="switch">.
  • Associate label via <label>.
  • role="switch" communicates on/off semantics.
  • Disabled uses native disabled attribute.
  • Focus indicators meet 3:1 contrast.

Theming

Switch adapts across brands and modes through tokens. Use the hero switches above.

For the full theming architecture see Foundations: Theming.

Design checklist

✓
All interactive statesOn, off, hover, focus, disabled.
✓
All color themesWorks across light and dark modes.
✓
Accessible use of colorThumb position indicates state (WCAG 1.4.1).
✓
Accessible contrastTrack and label meet contrast requirements.
✓
Content standardsLabel guidelines documented.
✓
Defined optionsChecked, disabled documented.
✓
Defined behaviorsImmediate effect, animation, focus documented.
✓
Usage guidelinesSwitch vs. checkbox do/don't.
✓
Keyboard interactionsSpace and Tab documented.
✓
Design tokensComponent-scoped tokens (--switch-*).
–
Figma componentNot yet connected via Code Connect.