Switch

A switch turns a setting on or off, and the change applies at once. On, it is a yellow sticker with its knob slid to the right. Switches and radios are the only round controls in the system.

When to use

Which controls apply at once and which are saved is in Forms.

Anatomy

• Switch: the 50 × 30px track, the same on a phone and a desktop. Required. Beside a label, put it in a FieldItem or at the end of a ListRow variant="plain": it centers on the label's or title's first line at its full 50 × 30. A one-line settings row is centered as a whole, 54px on a phone. Don't add a margin-top (Alignment).
• SwitchThumb: the round knob. Switch renders it by default.

States

• Off: a fill-muted track with an ink border, and a white knob on the left.
• On: a brand sticker with an ink edge, and a white knob on the right. It looks the same in dark mode, where it gains the die-cut edge (Dark mode).
• Disabled: the shared disabled look, on or off (States).

Behavior

• Slide the knob over 220ms with ease-slide (Motion).
• Put the switch at the end of a settings row (ListRow with interactive={false}). The row itself is not a button and doesn't react to hover or press; focus goes only to the switch.

Content

• Make the description say what follows from the setting, without repeating the title: for Agents can merge to main, "Off: a person approves every merge."

Accessibility

Switch wraps Base UI Switch: an element with role="switch" whose aria-checked says whether it is on, with a hidden native input for forms.

• Name it with aria-labelledby pointing at the row's title.
• Set disabled when the setting can't be changed.

Rules

• Keep the switch a pill, though everything else is square: people recognize a switch by its round shape, and a square switch isn't read as one (Shape).
• Never color a switch green or blue: green means done and online, and an on switch is yellow.