Checkboxes
Checkboxes let users select one or more options from a list. They are used for choices that are not mutually exclusive, such as selecting multiple preferences or agreeing to terms.
Default format
When to use
- To allow users to select multiple options in a group.
- For binary settings that are independent of other choices. For example, Enable notifications.
- When a task involves filtering or refining data. For example, applying multiple filters to a search.
Style
- Use clear, direct labels that describe what happens if the box is checked.
- Write labels in positive form.
| Do | Don’t |
|---|---|
| Show archived items | Don’t hide archived items |
- Group related checkboxes under a group label when possible for context.
- Keep labels parallel in style and length for readability.
- Avoid jargon and abbreviations.
Behavior
Allow users to select by clicking either the box or the label.
Do / Don’t
| Do | Don’t |
|---|---|
| Enable notifications | Notifications enabled (noun-first label) |
| Show archived items | Don’t hide archived items |
| Agree to terms and conditions | Agreement with terms and conditions |
Card format
Use card-format checkboxes instead of traditional checkboxes or radio buttons when each option needs rich context such as a title, description, image, metadata, or tags, and the selection should feel like a visual choice rather than a text label.
When to use
- Primary decision point: when the consequences of the choice are important, or they drive a main workflow or journey.
- Examples: pricing tiers, template selections (for example, use cases), or layout choices.
Behavior
- Indicate selected state visually (
Selectedhighlight border, and so on). - Click anywhere on the tile to toggle selection.
- For multi-select: use checkbox behavior. For single-select: use radio group behavior.
- Maintain selection across steps if part of a multi-step process.
- Title: short, descriptive, and consistent across tiles.
- Supporting text: use only in the large variant.