You need to show two or more choices, and users can select more than one. That’s when you use checkboxes. We also use checkboxes to toggle a single option or preference. An example of this is the “Let customers pay online” option in an invoice.
Use checkboxes when users can select one or more options from a defined, displayed list of choices.
Disabled / Default / Hover / Focus / Selected / Selected With Label
Progressive disclosure with checkboxes
Sometimes an interaction with a form element such as a checkbox triggers a new item or section to appear on the page. For example, choosing a product for purchase might subsequently reveal add-on options for that product. This is typical progressive disclosure behavior.
Content guidelines for checkboxes
- Present listed choices and labels in sentence case (examples: New invoice, Select an option).
- Use title case for proper nouns (examples: Bank of America, John Smith).
- Avoid punctuation in the listed options.
- Keep word count to a minimum.
- When possible, make options verb phrases (examples: Revise invoice, Create new).
- Be specific about what is going to happen when the user makes a selection.
- Never write Click here. The correct verb is select. Example: Select your term.
- Recommended voice and tone attribute: straightforward, encouraging
Checkboxes exist across devices, just with bigger tap targets for touch inputs.