Components
Checkbox
Turns an option on or off, alone or in a list where several can be chosen. Supports an indeterminate state for “some selected”.
Playground
Figma variant
🕹 State=Default
Size=Medium
Checked=False
with Label=True
Error=False
Disabled=False
Indeterminate=FalseVariants
Sizes
States
Hover darkens the border to primary, keyboard focus adds the focus ring, error turns the border red, disabled flattens the control.
In a form
ChoiceGroup is the Form Checkbox / Radio / Switch pattern: a label, the options 16px apart, and a hint or error.
Tokens
| State | Fill | Border | Mark |
|---|---|---|---|
| Off | --color-surface-level-1 | --color-surface-level-4 | |
| Hover / Focus | --color-surface-level-1 | --color-primary (+ --shadow-focus-primary) | |
| On / Indeterminate | --color-primary | — | --color-on-primary |
| Error | --color-surface-level-1 | --color-error (+ --shadow-focus-error) | |
| Disabled off / on | --color-surface-level-2 / --color-primary-tint | --color-surface-level-4 |
Notes from Figma
- The 6px corner is a raw value in Figma; code adds it as --radius-checkbox.
Figma to code
| Figma | React |
|---|---|
| Size = Medium / Small | size='medium' / 'small' |
| Checked / Indeterminate | checked / indeterminate |
| with Label = True | label="…" |
| Error / Disabled | error / disabled |
| 🕹 State = Hover / Focus | :hover / :focus-visible |
| Form Spacing = True | spacing |
| Form Checkbox | <ChoiceGroup label hint> |