Checkbox
You might say
These options don't conflict, so people should be able to choose more than one.
Choose one, several, or none of the optionsCheckboxes work for interests, filters, and other choices that are independent of one another. A single checkbox can also confirm one statement. If exactly one option must be selected, use Radio instead.
When to use it
- Select several interests
- Apply multiple filters
- Choose rows in a table
- Confirm one independent statementI have read and agree to the Terms of Service
When NOT to use it
- Use checkboxes for choices that exclude each other
- Preselect consent that the user should give knowingly
- Make the clickable label too small
- Leave the effect of selecting a parent item unclear
Anatomy
Receive product update emails
Each checkbox row is independently clickable.
Use an indeterminate mark when only some child items are selected
Explain what selecting the checkbox will do
Variants
Default
Use for multiple independent choices or a single confirmation
Indeterminate
Use an indeterminate state when only some items in a batch are selected
Disabled
When an option is temporarily unavailable
Typical use cases
Filter panel
Status
5 items in total
Interest picker
Choose the direction you are interested in
Multiple selections to help you recommend more suitable content
Bulk selection
Terms confirmation
2 items selected
Further reading