Checkboxes are small, square decision making components used for optional choice or multi-selectable lists.
Overview
Checkboxes are designed to be used for "yes" and "no" interactions, or interactions where a choice is optional. Use Checkbox for interactions when a multi-select list is needed.
For single choice interactions, please consider Radio Button or Segmented Control. The key difference between a Checkbox and Radio is Radios must always have something active, whereas the Checkbox utility is optional.
For "on" and "off" interactions, also consider Switch.
Usage
- "Yes" and "no" interactions
- Boolean
- Workflows where multi-selection is needed
- Form elements
Sample
Accessibility
Keyboard navigation
| Key | Function |
|---|---|
Space | Toggle the component's checked value. |
Space | Toggle component's checked value. |
Tab | Moves focus in and out of component. |
Tab and Shift | Moves focus in and out of component. |
Writing and copy
Keep labels for Checkboxes simple and succinct. Do not use contractions, such as "you're", "aren't", "can't", and "haven't" for Checkbox labels in order to reduce confusion. Avoid writing Checkbox text as a question.
A label for a Checkbox can denote its action as additive or subtractive. For example:
- Save info for later (additive)
- Invite me to the user testing group (additive)
- Delete locally after upload (subtractive)
- Remove user metadata (subtractive)
