Selection
Checkbox
Binary selection control. A 26px rounded box that fills red with a white check when selected, and turns its border red on error.
Checkbox is the basic building block for yes/no choices in forms and lists — agreeing to terms, ticking the options that apply, selecting rows to act on.
The component is just the box. It has no label of its own, so it is normally placed next to text inside a label. When the whole row should be the click target, and presented as a card, use Checkbox Interactive instead.
Three states are drawn in Figma: empty, checked and error. Hover and focus are handled in code; see the Style tab.
Do
- Give every Checkbox an accessible name — wrap it in a label, or pass aria-label.
- Use it for independent yes/no choices, or for picking several options from a list.
- Show a text error message next to a Checkbox in the error state.
Don't
- Don't use a Checkbox for a choice that takes effect immediately — use a toggle or a Button.
- Don't rely on the red border alone to communicate an error; the message has to say what's wrong.
- Don't use Checkboxes for mutually exclusive options; those need a radio group.