Checkbox: multiple

Checkboxes allow users to select one or more options from a visible list.

When to use

• When a user can select any number of choices from a set list.
• When a user needs to choose “yes” or “no” on only one option (use a stand-alone checkbox). For example, to toggle a setting on or off.
• When users need to see all the available options at a glance.

When to consider something else

• If there are too many options to display on a mobile screen.
• If a user can only select one option from a list (use radio buttons instead).

Guidance from the U.S. Web Design System

• Users should be able to tap on or click on either the text label or the checkbox to select or deselect an option.
• List options vertically if possible; horizontal listings can make it difficult to tell which label pertains to which checkbox.
• Avoid using negative language in labels as they can be counterintuitive. For example, “I want to receive a promotional email” instead of “I don’t want to receive promotional email.”
• Make sure selections are adequately spaced for touch screens.

GitHub issues

• #314: Improve usability and visual design of check box and radio button elements