Components / Inputs / CheckboxOpen in Figma
Checkbox
ReadyLets people tick any number of options from a list, or confirm a single yes.
When to use
- People can choose any number of options, including none.
- A single statement needs a yes, such as marking a field as mandatory.
When not to use
| If people need to | Use |
|---|---|
| Choose exactly one option | Dropdown, or option rows with radios |
| Turn a setting on or off with an instant effect | Switch |
| Choose people, sites or animals | Picker field |
| Narrow a list | Filter screen |
Anatomy
check_box
Option 1Hint text
check_box_outline_blankOption 2
- Row · required in the row variant; the whole row is the touch area
- Box · required, 24
- Label · required
- Hint text · optional, one line
Variants
| Variant | Purpose | Figma |
|---|---|---|
| Row | Each option in its own bordered row. The default in forms | Designed |
| Row with hint | A second line in Muted grey when the option needs one fact more | Designed |
| Plain | Box and label with no row border, for a single yes inside a card or a short list in a filter | Designed |
States
| State | When | What changes | Figma |
|---|---|---|---|
| Unticked | Not chosen | Outline box in Ink | Designed |
| Ticked | Chosen | Filled box with a white tick, in Antz green | Designed |
| Partly ticked | A "Select all" box when only some of its options are ticked | Filled box with a dash, in Antz green | Temporary rule |
| Disabled | The option can't be changed now | Disabled fill, box in Line grey, label in Hint grey; the glyph still shows ticked or unticked | Temporary rule |
Behaviour
- Tapping anywhere on the row ticks or unticks it, not only the box.
- Ticking does nothing on its own; the choice is kept when the form is saved.
- "Select all" ticks every option; when all are ticked it unticks them all. When only some are ticked it shows the partly ticked glyph.
- Options are never pre-ticked unless most people would tick them anyway.
Phone and tablet
| Phone | Tablet | |
|---|---|---|
| Label to list | 8 | 12 |
| Rows | One per line, gap 8 | Two per line when labels are short, gap 8 |
Content
| Part | Rule |
|---|---|
| Label | A noun in sentence case, no colon, naming the group |
| Option | Short, in sentence case, phrased so that ticking means yes. No "Don't…" |
| Hint text | One fact that tells similar options apart; not a sentence |
Do and don't
check_boxOption 1
check_box_outline_blankOption 2
DoShow ticked and unticked with different glyphs.
check_box_outline_blankOption 1
check_box_outline_blankOption 2
Don'tMark a ticked option by colour alone.
check_box_outline_blankOption 1
check_box_outline_blankOption 2
DoKeep the box on the left, the same in every row.
Option 1check_box_outline_blank
check_box_outline_blankOption 2
Don'tMove the box between sides within one list.
Related
Specs
Click a value to copy it.
| Part | Property | Phone | Tablet |
|---|---|---|---|
| Row | Border | ||
| Corners | |||
| Padding | |||
| Gap between rows | |||
| Gap box to label | |||
| Box | Size | ||
| Box, unticked | Glyph | ||
| Box, ticked | Glyph | ||
| Box, partly ticked | Glyph | ||
| Label | Type | ||
| Colour | |||
| Hint text | Type | ||
| Colour | |||
| Space above | |||
| Group label | Type | ||
| Space below | |||
| Plain | Gap box to label | ||
| Gap between options | |||
| Disabled | Fill | ||
| Box colour | |||
| Label colour |
Accessibility
- Each row is announced as a checkbox with its label and its state: ticked, not ticked or partly ticked.
- States are different glyphs (outline box, box with tick, box with dash), never colour alone.
- The whole row is the touch area, at least 42 tall; the box alone is never the only target.
- The group label is read before the first option so people know what they are choosing.
- Antz green on white scores 2.4 for readability, so the glyph shape carries the state, not its colour.
Changes
| Date | Change |
|---|---|
| 26 Oct 2026 | Ticked, unticked and partly ticked set as three glyphs from one icon set. |
| 26 Oct 2026 | Partly ticked and disabled added as temporary rules until designed in Figma. |