Checkbox
A small square that turns one option on or off, on its own or in a list where any number can be chosen. It also has a third, mixed state for a parent whose children are partly checked.
Preview
When to use
- For independent options where any combination is valid: notify me by email, by SMS, by push.
- For a single agreement that must be ticked before going on: I accept the terms.
- For select-all above a list, using the indeterminate state when only some rows are checked.
Reach for something else
- For one choice out of several: that is a Radio group.
- For a setting that takes effect the moment it changes: that is a Switch.
Anatomy
- 1
Box
A rounded square with a hairline border at rest, filled in the brand colour when checked.
- 2
Mark
A tick when checked, a short bar when indeterminate.
- 3
Label
Says what checking it means. Clicking it toggles the box too.
- 4
Description
Optional secondary line under the label, for consequences or detail.
States
Unchecked
Empty box, hairline border.
Checked
Filled box with a white tick.
Indeterminate
Filled box with a bar: some, not all, of its children are checked.
Focus
A visible ring around the box for keyboard users.
Disabled
Muted box and label; it cannot be changed.
Accessibility
- Built on a native <input type="checkbox">, so Space toggles it and it is announced as a checkbox.
- The label is a <label> tied to the input, which widens the hit area to the text.
- Indeterminate is set on the input's indeterminate property, so it is announced as mixed.
- A group of related checkboxes sits in a <fieldset> with a <legend> naming the question.
Source
The Checkbox is in the Figma library today, with every variant and state above. Its React and Vue source ships with the code library, free, and this page gets the install line, the props and the code the day it does.
See it in a block