Checkbox
Checkboxes allow users to select one or more options from a list, or toggle a single binary choice. They support checked, unchecked, and indeterminate states.
Anatomy
- 1 Field wrapper — groups the control and label as a click target
- 2 Control box — shows checkmark, bar, or empty state
- 3 Label — describes the choice
Options
States
Table of options
| Property | Values | Default |
|---|---|---|
| label | text | — |
| checked | true / false | false |
| indeterminate | true / false | false |
| disabled | true / false | false |
| state | default / hover / active / focus / indeterminate / disabled | default |
Behaviors
Toggle on click
Clicking the checkbox or its label toggles between checked and unchecked. The change is immediate.
Indeterminate state
Represents a partial selection — typically when a parent checkbox controls a group where some children are checked. Set programmatically, not by user interaction.
Keyboard focus
Adds a visible focus ring. The checkbox is toggled with Space when focused.
Disabled state
Cannot be toggled. Removed from the tab order with reduced contrast.
Usage guidelines
Use checkboxes for independent choices
Do
Use checkboxes when each option can be toggled independently.
Don't
Don't use checkboxes for mutually exclusive choices — use radio buttons instead.
Always provide a visible label
Do
Every checkbox must have a visible text label.
Don't
Don't use a checkbox without a label.
Content standards
- Write labels as positive statements: "Receive updates" not "Don't send updates".
- Use sentence case.
- Keep labels to one line when possible.
Keyboard interactions
| Key | Interaction |
|---|---|
| Space | Toggles the checkbox between checked and unchecked. |
| Tab | Moves focus to the next focusable element. |
| Shift + Tab | Moves focus to the previous focusable element. |
Accessibility
- Use native
<input type="checkbox">with an associated<label>. - Indeterminate state is communicated via
aria-checked="mixed". - Disabled checkboxes use the native
disabledattribute. - Grouped checkboxes should be wrapped in a
<fieldset>with a<legend>. - Focus indicators meet 3:1 contrast.
- Checked state uses a checkmark, not color alone.
Theming
Checkbox adapts automatically across brands and color modes through component tokens. Use the hero preview switches above to see it in action.
For the full theming architecture see Foundations: Theming.