Guidelines
Checkboxes are most commonly used to give users a way to make a range of selections (zero, one, or multiple). They may also be used as a way to have users indicate they agree to specific terms and services.
States
Checkboxes come in the following states:
Dimensions
Checkboxes come in 2 sizes and fit either desktop or mobile use cases.
Selecting the Best Input
Sometimes deciding which user interface element to use — radio buttons, checkboxes, or toggles — can be difficult. When detremining which option will best fit your use case, consider the number and type of options, and if there is any clear default value. The below table summarizes questions and answers about these frequently used UI elements.
| Scenario | Radio Buttons | Checkboxes | Single Checkbox | Toggle |
|---|---|---|---|---|
How many options? | Multiple | Multiple | 1 | 1 |
How many selections? | 1 | 0 - all | 2 (on/off) | 2 (on/off) |
Is there a default option? | Yes | No | Yes | Yes |
What kind of choices? | Mutually exclusive | Independent of each other | Mutually exclusive | Mutually exclusive |
When does the selection take effect? | After submit button | After submit button* | After submit button | Immediately |
When to use checkboxes
Use checkboxes to:
- Toggle single or multiple options on or off
- Activate or deactivate something after user selects “submit” button
Spacing Guidelines
We suggest the following spacing guidelines for desktop and mobile use cases.
Usage Guidance
We suggest the following usage guidance for desktop and mobile use cases.
