Skip to content

role checkbox

Checkbox draft v0.1.0

Lets people turn one option on or off, or pick any number of options from a list.

A checkbox is a binary choice with a visible label: checked or unchecked, and a third, partially checked look when it stands for a group whose members disagree. Several checkboxes side by side let people pick any number of options; one checkbox alone confirms a statement (accepting terms, remembering a session). A setting that takes effect immediately is a Switch; a choice of exactly one option is a Radio group.

Decisions

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

Color

  • The box is outlined in the accent neutral border color on the default surface when unchecked, and filled with the accent brand color with a mark in the on-accent brand icon color when checked or partially checked; hover tints the empty box with the surface hover color; an invalid box takes the base error border; disabled takes the shared disabled colors. The same colors hold for the Radio group and the Switch.

    The Figma library maps no color to form controls. The accent neutral border is the lightest neutral border that keeps 3:1 against the surface in both modes (WCAG 1.4.11); the brand fill makes the on state the same as the brand action color.

    selection-control-colors · 2026-10-03 · v0.1.0

    checkbox.control.background.*checkbox.control.border-color.*checkbox.control.color.*

    WCAG 1.4.11 Non-text Contrast (AA)

State

  • A state is one token path segment: hover changes the empty box only; a checked, partially checked or disabled box does not change on hover.

    checked-wins-over-hover · 2026-10-03 · v0.1.0

    checkbox.control.background.hovercheckbox.control.border-color.hover

Size

  • Two sizes: small (16 px box, 14 px label) and medium (20 px box, 16 px label, the default), from the Figma library's size and body scales; the box border is 1.2 px (stroke-width.md) and its corners 2 px (small) or 4 px (medium).

    sizes · 2026-10-03 · v0.1.0

    checkbox.control.size.*checkbox.control.border-radius.*checkbox.control.border-widthcheckbox.label.typography.*checkbox.description.typography.*

Anatomy