Checkbox

An input that lets users select one or more options from a limited number of choices. Each selection is independent (with some exceptions).

Guidelines

Alternate selection controls

Checkboxes are one of several selection controls, which allow users to make choices such as selecting options or switching settings on or off.

Radio buttons and toggles are alternative selection controls that can be used to enter decisions or declare preferences such as settings or dialogs.

Do not check options by default

Avoid default checked options. Users might not realise they’ve missed a question and submit an unintended answer. Pre-select checkbox options make it more likely that users:

Will not realize they've missed a question.

Submit a wrong answer

Don't

Label positon

Always position checkboxes to the left of their labels. This makes them easier to find, especially for users who use screen magnifiers.

Don't

Multi-select checkbox vs radio

Unlike with radio buttons, users can select multiple options from a list of checkboxes. Do not assume that users will know how many options they can select based on the visual difference between radio buttons and checkboxes.

If needed, add a hint explaining this. E.g. "Select all that apply."

Order checkbox options alphabetically by default

In some cases, it can be helpful to order checkboxes from most to least common options. E.g. "What is your nationality?" could be ordered based on population size.

Content

Settings or preferences

These are for letting users opt in or out of certain behaviors.

Use affirmative statements
The checkbox should clearly state the ON state of the option.
✅ Enable automatic confirmations
✅ Send confirmation email to guests
🚫 Automation confirmation
🚫 Confirmation email

For simple on/off switches, a toggle might be more appropriate. Check the Toggle guidelines to choose for your use case.

These are for accepting terms, confirming understanding, or giving permission.

Write as positive affirmations the user can agree to
It should be clear that happens is checked, and checking the box should always be opting in.
✅ I agree to the cancellation policy
✅ I would like to receive marketing communications
🚫 Marketing emails
🚫 Do not send me marketing emails

Checkbox lists

These are for selecting multiple items from a list (often with a “select all” option).

Think about grouping and order
The goal is to make lists quickly scannable. There are a variety of ways to do that:

As a default, if there are no better options, make it alphabetical.

If the list is long, group them them into categories with a title separating each group.

If you know there are some options that most users will look for, you might put those in a small group at the top, separated from the rest of the list.

Accessibility

Keyboard

Users can navigate to and between checkbox inputs by pressing Tab or Shift-Tab on their keyboard. Users can trigger a state change by pressing Space while the checkbox input is in focus.

A tri-state checkbox that is partially checked (indeterminate) has aria-checked set to "mixed".

See the ARIA authoring practices for more considerations.

The <legend> provides a description for the grouping.

Some assistive technology reads the legend text for each fieldset, so it should be brief and descriptive. This helps someone using assistive technology to understand the question they are answering with a group of checkboxes.

WAI-ARIA provides a grouping role that functions similarly to fieldset and legend. In option #2 the div element has role=group to indicate that the contained elements are members of a group and the aria-labelledby attribute references the ID for text that will serve as the label for the group. Note: This method is not supported by all browser/AT devices.

WCAG 2.1 Guidelines

1.1.1 Non-text Content - All non-text content that is presented to the user has a text alternative that serves the equivalent purpose. (Level A)

1.3.1 Info and Relationships - Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)

2.4.6 Headings and Labels - Headings and labels describe topic or purpose. (Level AA)

3.3.2 Labels or Instructions - Labels or instructions are provided when content requires user input. (Level A)

4.1.2 Name, Role, Value - For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies. (Level A)