Checkbox usage guidelines

Checkboxes allow users to select one or more options from a visible list, or for a single option that can be checked on or off.

When to use

• Use when multiple options in a list can be selected at the same time.
• Use when one or more options can be turned on or off (selected or deselected).
• Use when the user needs to see all of the available options at a glance.

When not to use

• Use radio buttons when only one option can be selected at a time.
• Consider using toggle when a use case requires a binary toggle like “on/off” or “yes/no”.
• Use multi-select when there are more than 5 choices to select or display.
• When the list of items needs to be searchable, multi-select should be used instead.

Properties

Checkbox states

Preview

Checked

Unchecked

Indeterminate

Read-only

Disabled

Code

import { Checkbox, Stack } from '@cimpress-ui/react';

export default function Demo() {
  return (
    <Stack gap={16} direction="horizontal" wrap>
      <Checkbox isSelected>Checked</Checkbox>
      <Checkbox>Unchecked</Checkbox>
      <Checkbox isIndeterminate>Indeterminate</Checkbox>
      <Checkbox isReadOnly>Read-only</Checkbox>
      <Checkbox isDisabled>Disabled</Checkbox>
    </Stack>
  );
}

State	Use cases
Checked	The checked state indicates that an option is selected or “turned on”. The user is saying yes, they want this option.
Unchecked	The unchecked state indicates that an option is unselected or “turned off”. The user is saying no, they don’t want this option.
Indeterminate	The indeterminate state indicates that an option is in an between state. Used when a parent or global checkbox has some children checked and some unchecked.
Read-only	Read-only checkboxes cannot be interacted with by the user, but they are still focusable and accessible to assistive technologies. Use the read-only state for situations where the selection cannot be changed, but the label content still needs to be communicated to the user.
Disabled	Disabled checkboxes cannot be interacted with, focused, nor accessed in any manner by assistive technologies. The disabled state should only be used for irrelevant options that cannot be selected.

Checkbox group

Preview

Favorite fruits

Apple

Banana

Cherry

Orange

Select all fruits that you enjoy eating.

Code

import { Checkbox, CheckboxGroup } from '@cimpress-ui/react';

export default function Demo() {
  return (
    <CheckboxGroup label="Favorite fruits" description="Select all fruits that you enjoy eating.">
      <Checkbox value="apple">Apple</Checkbox>
      <Checkbox value="banana">Banana</Checkbox>
      <Checkbox value="cherry">Cherry</Checkbox>
      <Checkbox value="orange">Orange</Checkbox>
    </CheckboxGroup>
  );
}

The checkbox group component provides a title and list of checkboxes. This should be used when a title is needed to provide context for the user or if a list of checkboxes is being used.

Formatting and layout

Placement

Checkboxes should be vertically aligned and include a label whenever possible. Only align them horizontally when space does not allow them to be vertical. The group title is always placed above the checkbox list, even if the list is horizontal.

Do

Favorite fruits

Apple

Banana

Cherry

Do

Favorite fruits

Apple

Banana

Cherry

Spacing

• Vertical checkboxes should have 8px of spacing between them.
• Horizontal checkboxes should have 16px of spacing between.
• Nested checkboxes should be indented by 24px for each level.

Form alignment

Checkbox groups used in forms should always include a title to give users context. The checkbox group should be left-aligned with the rest of the form elements.

Do

Name

Favorite fruits

Apple

Banana

Cherry

Submit

Table alignment

Checkboxes can be used in tables to make each row selectable. When used this way, the checkbox should not include a label or title and should be center-aligned in the cell.

Always include an additional checkbox in the table header to allow users to select all or none of the checkboxes. This header functions as a parent checkbox to all the checkboxes in the table.

Content writing

• Do use clear and concise labels.
• When checkboxes are in a group, do include a title for the group if it will give users context for what the options mean.
• Do use sentence case for checkbox labels.
• Do not ever have an independent checkbox with no label unless the checkbox is being used to select a content area such as a card or table.
• List the options in a logical order such as alphabetical, simple to complex, or most commonly selected first.
• End the description and error text with a period or equivalent punctuation mark. This helps screen reader users understand where the description and error text ends, and it improves readability for all users.

Behaviors

Description text and error text

Checkbox groups can optionally include description text and error text to give users more context and understanding. The description text and error text will always be at the bottom of the group, not underneath an individual checkbox item. All text should be limited to one sentence and clearly give users any additional information needed in plain language. Error text must always give users a path to resolving the issue.

Text wrapping

The checkbox should always be top aligned with the text label even if the text is too long to fit on one line and needs to wrap. Do not center align the checkbox.

Nested checkboxes

Children should be indented under parent checkboxes to indicate the hierarchical relationship. The child checkbox’s state should change to reflect any changes to the parent’s state and vice versa.

• If the user checks the parent, all of its children auto check
• If the user unchecks the parent, all of its children auto uncheck
• If all children are checked and a child becomes unchecked, the parent auto changes to indeterminate
• If all children are unchecked and a child becomes checked, the parent auto changes to indeterminate

The disabled state should never be used to manage the parent/child relationship between checkboxes. A user checking the parent, for example, should not result in the children becoming checked and disabled. The user should be able to interact with each checkbox individually.