Checkbox
Use the checkbox component to select one or more options of a limited number of choices.
On this page
On this page
Anatomy
- Checkbox: A selection control.
- Label: A description for the checkbox.
Usage
Use checkboxes to allow users to select multiple items from a list of individual items, or to mark one individual item as selected. Unlike the Radio component or Select component, Checkbox does not restrict users to choosing just a single option.
Checkbox labels should be descriptive and concise. Write labels in sentence case.
Checkbox labels should be descriptive and concise.
Don't make checkbox labels confusing, indirect, and avoid negative statements.
Use consistent styling (starting with capitalization and not ending with punctuation).
Don't have inconsistent styling (not starting with capitalization or ending in punctuation).
Use first-person when asking users for acknowledgement or consent.
Don't use third-person when asking users for acknowledgement or consent.
Create checkbox options that are non-exclusive and allow for multiple selections.
Don't use checkbox options exclusive to one another. They should not be automatically deselected.
States
Checkboxes have static dimensions and four different states: rest (default), checked, indeterminate, and disabled.
An indeterminate checkbox state should be used if the input value is neither true nor false. This can be useful in situations where you are required to display an incomplete state, or one that is dependent on other input selections to determine a value.
Accessibility
Please use FormControl to display accessible checkboxes in the UI. This Checkbox component is intended only as an ingredient for other custom components, or as a drop-in replacement for native HTML checkboxes outside of form use-cases.
If you intend to use this component as part of another component, it should always be accompanied by a corresponding <label> to improve support for assistive technologies.
Related components
- Radio: Use the radio component when a user needs to select one option from a list.
- Select: Use the select component to enable selection of one option from a list.
- FormControl: Use the form control component to display form inputs alongside labels, validation and more.