Skip to content

role switch

Switch draft v0.1.0

Turns a setting on or off, with immediate effect.

A switch is a binary control for a setting that applies as soon as it is flipped: notifications on or off, dark mode, airplane mode. It has two values only, on and off, shown by the position of its thumb and the fill of its track. A choice that is saved later with a form, or that may be partially on, is a Checkbox.

Decisions

From decisions in packages/components/specs/components/switch.spec.json, newest first. Every active decision is implemented by the spec, the tokens, the web implementation and the guidelines.

Color

  • Off, the track is outlined in the accent neutral border color on the default surface with a thumb in the accent neutral fill; on, the track fills with the accent brand color and the thumb takes the on-accent brand icon color. Hover tints the off track with the surface hover color; disabled takes the shared disabled colors. The same families as the Checkbox's selection control colors.

    The Figma library maps no color to form controls, and its light neutral fills stay under 3:1 against the surface: an outlined off track keeps the control identifiable in both modes (WCAG 1.4.11).

    outlined-off-filled-on · 2026-10-03 · v0.1.0

    switch.control.background.*switch.control.border-color.*switch.thumb.background.*

    WCAG 1.4.11 Non-text Contrast (AA)

Size

  • Two sizes from the Figma library's space scale: small (32 x 20 track, 12 px thumb, 14 px label) and medium (40 x 24 track, 16 px thumb, 16 px label, the default); the track border is 1.2 px and fully round, the thumb inset 2 px.

    sizes · 2026-10-03 · v0.1.0

    switch.control.width.*switch.control.height.*switch.thumb.size.*switch.thumb.marginswitch.control.border-widthswitch.control.border-radiusswitch.label.typography.*

Behaviour