Usage guidelines
When to use
- In a list, form or Table, to present users with multiple, related options where more than one option can be selected. Users must be able to select all, none or some of the presented options.
- When selection doesn’t take immediate effect and requires form submission.
When not to use
- Situations where users can only choose one out of multiple, related options. Use RadioGroup instead.
- When a selection takes immediate effect, especially on mobile. Use Switch instead.
- When visually, it’s hard to tell that a checkbox turns something on or off. Use Switch instead.
Best practices
Do
Use checkboxes for multi-selection of related list items
Do
Use a single Checkbox in forms where the selection only takes effect after submitting the form
Accessibility
People use Apple and Android’s accessibility features, such as VoiceOver and TalkBack to personalize how they interact with their device. Supporting these personalizations ensures that everyone has a great user experience. See Apple and Android’s accessibility documentation for more information:
Design tokens
Anatomy
Variants
State
- Unchecked [Default]
- Checked
- Error
- Indeterminate
- Disabled
Unchecked
Checked
Error
Indeterminate
Disabled
With helper text
Checkbox supports helper text to provide more details about an option.
Writing
Do
- Be clear and brief with checkbox labels so they are easily scanned
Don't
- Include lengthy text labels that make it hard for a user to scan a list of choices