Forms

Switch

Switch is a boolean settings control for immediate on/off changes — not a substitute for Checkbox in forms.

Value (Off/On) × State — 8 variants

betaReact AvailableFigma AvailableDocs Partial

Known open questions

Switch thumb travel uses temporary spacing tokens pending Figma alignment property confirmation.
Switch surfaces remain functionally flat in Gradient/Glass modes.

Switch is for immediate settings changes — not form agreement or multi-select.

Off by default

On by default

Disabled

Email notifications

Weekly digest

Product announcements

Toggle a setting on/off with immediate effect (no separate form submit required).

Switch = role=switch button + track + thumb + visible label.

off · on · disabled

Settings that apply instantly when toggled (notifications, dark mode, feature flags).

A choice that only takes effect after a form submission (use Checkbox).

Renders as role="switch" with aria-checked, not a plain checkbox.

Space and Enter activate the native button, which toggles aria-checked through click handling. type="button" prevents form submission.

Using Switch for a setting that actually requires a form submit to take effect.

Value × State as variants. Label (text). Thumb position driven by the track's alignment property, not hardcoded coordinates.

Checkbox records a choice that usually submits with a form. Switch applies a setting immediately, such as notifications or theme preferences.

semantic/border/strongsemantic/action/primarysemantic/surface/defaultsemantic/focus-ring

Prop	Type	Default	Description
label	string	—	Accessible name via aria-labelledby.
checked	boolean	—	Controlled on state.
defaultChecked	boolean	—	Initial uncontrolled on state.
disabled	boolean	false	Prevents toggling.

Copy React example

import { Switch } from "@/components/ui/Switch";

export function Example() {
  return <Switch label="Email notifications" defaultChecked />;
}