Checkboxes are most commonly used to give merchants a way to make a range of selections (zero, one, or multiple). They may also be used as a way to have a merchant indicate they agree to specific terms and services.
Use in forms to toggle the state of something on or off. Default checkboxes can appear in two states: selected and disabled, or unselected.
<Checkbox label="Basic checkbox" />
Put the merchant first by identifying the problem they face and the component that helps them solve it.
Merchants may need to choose more than one item from a list of options.
A checkbox lets merchants choose one or many things from a list.
- Work independently from each other: selecting one checkbox shouldn’t change the selection status of another checkbox in the list. The exception is when a checkbox is used to make a bulk selection of multiple items.
- Be framed positively: for example,
Turn on notificationsinstead of
Turn off notifications
- Always have a label when being used to toggling a setting on or off
- Be listed according to a logical order, whether it’s alphabetical, numerical, time-based, or some other clear system.
- Link to more information or include a subtitle as required to provide more explanation. Don’t rely on tooltips to explain a checkbox.
Lists with checkboxes
Lists that use checkboxes should:
- Start with a capital letter
- Option 1
- Option 2
- Option 3
- option 1
- option 2
- option 3
- Not use commas or semicolons at the end of each line
- In the rare case where the checkbox is asking the merchant to agree to terms or service, use the first person
I agree to the Terms of Service.
You agree to the Terms of Service