03 / Components

Switch

Toggles a single setting on or off. State changes are immediate and persistent.

Demo

Preview

Off

Reference

States

Switch is binary by design. The visible states are off, on, disabled-off, and disabled-on. The disabled states are non-interactive but legible.

off

disabled · off

disabled · on

Guidelines

Usage

Use Switch for binary settings that take effect immediately on toggle.

Don’t

Use Switch for actions that need confirmation or a save step — use a Button.

Pair every Switch with a clear, persistent label describing what the setting controls.

Don’t

Rely on the on/off visual alone to convey what the toggle does.

Use a real <button role="switch"> element so screen readers announce the role correctly.

Don’t

Reskin a checkbox or radio as a switch — the semantics differ.

Implementation

Code

1const [on, setOn] = useState(false)
2
3<Switch.Root checked={on} onCheckedChange={setOn} className="lex-switch">
4  <Switch.Thumb className="lex-switch__thumb" />
5</Switch.Root>

Reference

Design tokens

Token	Usage
`--color-surface-2`	Track background — off state
`--color-accent`	Track background + border — on state
`--color-text`	Thumb fill — off state
`--color-bg`	Thumb fill — on state
`--color-border`	Track border — off state
`--lex-radius-pill`	Track and thumb shape
`--transition-fast`	Background and border transitions
`--transition-base`	Thumb translate transition

A11y

Accessibility

Switch implements the WAI-ARIA switch pattern via Radix. The trigger is a real <button> with role="switch" and aria-checked reflecting the state. Always pair with an accessible name — either visible text or aria-label.

`Space`/`Enter`	Toggle the switch
`Tab`	Move focus to the next focusable element
`Shift + Tab`	Move focus to the previous focusable element