Checkboxes
Component Overview
Section titled “Component Overview”Checkboxes allow users to select one or more items from a set, or toggle a single option on or off. They support three distinct states: unselected, selected, and indeterminate (ambiguous).
The Three Core States
Section titled “The Three Core States”- Unselected: The default state. The checkbox is empty, indicating the option is not active or selected. Visually represented by an empty outlined box.
- Selected: The active state. The checkbox is filled with a checkmark, confirming the option is selected. Uses the primary brand color to signal active selection.
Can also be used in hierarchical lists to mark a parent entry. Children will also be selected. - Indeterminate/Ambiguous: A filled box icon indicates a mixed selection.
The indeterminate/ambiguous state is used in search forms only to search for selected and unselected items at the same time. This state should never be saved as data or misused in the GUI.
Accessibility
Section titled “Accessibility”WCAG 2.2 Criteria
Section titled “WCAG 2.2 Criteria”Checkboxes must meet the following WCAG criteria to be compliant. All criteria apply to all three states unless noted.
| Criterion | Level | Requirement | How it applies |
|---|---|---|---|
| 1.3.1 Info & relationships | A | State must be conveyed programmatically, not by visual design alone | Use aria-checked="true|false|mixed" for all three states |
| 1.4.1 Use of color | A | Color alone cannot be the only visual means of conveying state | The checkmark icon (selected) and filled box icon (indeterminate) convey state beyond color, e.g., with a tooltip. |
| 1.4.3 Contrast (text) | AA | Label text must have ≥ 4.5:1 contrast ratio against its background | Default and disabled label text must pass. Disabled labels may not fall below 3:1. |
| 1.4.11 Non-text contrast | AA | UI component boundaries must have ≥ 3:1 contrast against adjacent colors | The checkbox border (unselected) must be ≥ 3:1 against the page background |
| 2.1.1 Keyboard | A | All functionality must be operable via keyboard | Tab to focus, Space/Enter to toggle. Indeterminate → selected → unselected on repeat Space/Enter |
| 2.4.7 Focus visible | AA | Keyboard focus indicator must be visible | Focus ring must appear on all focusable states and meet 3:1 contrast |
| 2.4.13 Focus appearance | AAA | Focus indicator area must be ≥ 2 px and contrast ≥ 3:1 | Use a minimum 3 px focus ring. |
| 2.5.3 Label in name | A | Accessible name must contain the visible label text | The aria-label must include the visible checkbox label |
| 2.5.8 Target size | AA | Minimum interactive target size of 24 × 24 px (44 × 44 px recommended) | The hit area (box + label) should extend to at least 44 px tall. Box alone ≥ 20 × 20 px. |
| 4.1.2 Name, role, value | A | Role, state, and name must be programmatically determinable | Use role="checkbox" with a linked or wrapping label. Set aria-checked dynamically. |
Keyboard Interaction (Minimal)
Section titled “Keyboard Interaction (Minimal)”When using div elements with role=checkbox, tabindex=1 must be set on the element, and the element must respect disabled states.
We recommend using HTML5 input elements with type="checkbox" to meet accessibility standards automatically.
- Tab: Move focus to the checkbox. Focus ring becomes visible. Screen reader announces: “Option label, checkbox, [state]”
- Space/Enter: Toggle state. Unselected → Selected → Unselected. If indeterminate: Indeterminate → Selected → Unselected
- Shift+Tab: Move focus backwards, e.g., through a list of checkboxes
All Interaction Sub-States
Section titled “All Interaction Sub-States”Each core state must also account for hover, focus, and disabled conditions. These states need to be implemented based on accessibility criteria.
- Default (unselected)
- Hover (unselected)
- Focus (keyboard)
- Selected
- Selected + focus
- Indeterminate
- Disabled (unselected)
- Disabled (selected)
Design Guidance
Section titled “Design Guidance”- Always include a visible label alongside the checkbox. Never use a checkbox without a label.
- Ensure the checkbox border has ≥ 3:1 contrast against the page background in all states.
- Don’t use checkboxes for mutually exclusive choices. Use radio buttons instead.
- Don’t place checkboxes on low-contrast backgrounds without testing the focus ring visibility first.
- Don’t use the disabled state as a placeholder. Hide checkboxes that are not yet contextually relevant.
When to Use Which Component
Section titled “When to Use Which Component”| Radio button | Checkbox | Toggle/Switch | |
|---|---|---|---|
| Selection type | Single choice | Multiple choice | Binary state |
| Effect | Selects one from a set Must be part of group | Selects any of a set Single checkbox allowed | Immediate on/off |
| Confirmation | Needs submit/apply | Needs submit/apply | Instant, no confirmation |
| Typical use | Settings, filters, forms | Multi-select lists | Agreements, enable/disable a feature, toggle visibility |