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.; Opens a new tab
- In a Form, along with a TextField, or other spaces that are too small for a Switch; Opens a new tab.; Opens a new tab
- 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 RadioGroupinstead.; Opens a new tab
- When a selection takes immediate effect, especially on mobile. Use Switchinstead.; Opens a new tab
- When visually, it’s hard to tell that a checkbox turns something on or off. Use Switchinstead.; Opens a new tab
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
Don't
Use a Checkbox to turn a state on and off with immediate effect. Use Switch instead. ; Opens a new tab
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 detail 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