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.
  • Be specific about what is going to happen when the user makes a selection.

Responsive behavior

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


Launch Preview
px wide

  • Was this Helpful?