Skip to Main Content

Checkboxes

Checkboxes let users select any number of options from a single list. A single checkbox lets a user turn an option on or off.

Use when:

  • User needs to make a choice or select an option.
  • User needs to indicate that they’ve completed a mandatory action.

Interactive component

Select a checkbox:
Disabled checkbox:
Select a checkbox:
This is where error message copy goes.

General guidelines

A checkbox allows the user to select options without deselecting others. It includes a checkbox icon and a label describing the selection. If the objective is to have the user make one selection, consider using radio buttons.

Positioning

Checkboxes are arranged like lists. Labels for checkbox items always appear to the right of the checkbox.

  • Stack checkbox items vertically. Horizontally arranged checkboxes are difficult to scan.

Responsive design

If checkbox copy is long and likely to wrap on smaller screens, make sure the copy wraps under the first letter of copy, not the checkbox button. When copy wraps, vertically align checkboxes with the first line of copy.

Interaction

States

The entire checkbox and label area is interactive. Checkboxes can have the following states:


  1. Default:
    In this state, a checkbox can be selected by clicking on it.
  2. Selected:
    In this state, a checkbox can be deselected by clicking on it.
  3. Focus:
    In this state, a checkbox will be surrounded by a blue box and activated by pressing spacebar. This state is critical for users that do not navigate your design by mouse.
  4. Disabled:
    In this state checkbox items cannot be selected, deselected, or activate a focus state.

Unselected

Unselected

Selected

Selected

Disabled

Disabled
  • Don’t preselect a checkbox unless you’re confident most users would make that selection.

Feedback

Error messages

When there is an error, the message is placed under the last checkbox item.

Error messages

Accessibility considerations

Keyboard accessibility

Checkbox focus states allow users to navigate checkbox options without a mouse. To provide visibility and context, the focus state should span the entire line, not just the checkbox itself.

The user can navigate checkbox options with tab and toggle between checked and unchecked states using the space bar.

Screen readers

Screen readers should announce the element as a checkbox, its associated label and its state.

With the same header, use <div role=”group”> to group checkboxes. Screen readers will announce the group of checkboxes according to the label you specify.

  • Though titling checkbox groups using headers or bold text is not necessary for screen readers, remember these elements are particularly useful for visual scanning.

Design specs

For all screen sizes.

For all screen sizes

General guidelines

A checkbox allows the user to select options without deselecting others. It includes a checkbox and a label describing the selection. If the objective is to have the user make one selection, consider using radio buttons.

Checkboxes are interactive and allow the user to select or deselect with a click. Content appears to the right of checkbox.

When writing for checkboxes, error messages let the user know what’s needed to proceed to complete the task. The error message appears under the last checkbox item.

  Guidelines Examples
Recommended length Use as needed to complete the thought but try to keep it to one line
Line wrap Minimize but not recommended; checkbox item should wrap under itself and not under the bullet
Phrasing Short phrases that explain each item
Case Sentence case

Dos and don’ts

Upper and lower case

Use sentence case. It helps with legibility.

Information architecture

Keep the copy short for each checkbox item so it’s clear and not cluttered.

Positive wording

Use positive, active wording on checkbox labels to be clear about what will happen if the user selects that checkbox. Avoid negations in wording for on, off, and opt-in checkboxes because they’re confusing to the user.

Code Samples

Basic

Note that this component may require additional styling.

Angular 2

<mat-checkbox> provides the same functionality as a native <input type="checkbox"> enhanced with Material Design styling and animations.

Note that this component may require additional styling.



Mendix

Checkboxes are an out-of-the-box functionality.

You simply need to select the Checkbox option from the toolbox on the right.

The styles for Checkboxes should be automatically applied along with the styles for their error states.

The Mendix toolkit can be found here.

Best practices

  • A checkbox allows for 1 or more selected values.
  • Each checkbox should be preceded by a label containing a descriptive value.
  • Clicking the label will select the associated checkbox.