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.

Usage

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

Responsive behavior

Checkboxes exist across devices, just with bigger tap targets for touch inputs.

Examples

Launch Preview
x
px wide

  • Was this Helpful?
  •