Checkbox and Checkbox group

Checkbox allows a user to select and unselect a single option or multiple options from a group of items.

Overview

Use a checkbox for multiple choice options. Each individual checkbox functions separately from the other checkboxes in a group.

Anatomy

1. Checkbox group label : The label helps the user understand the group of options.
2. Hint text (optional): The hint text is placed in between the checkbox group label and the checkbox inputs.
3. Checkbox input: Inputs are laid out vertically with one per line. Together with checkbox input label, this makes one checkbox.
4. Checkbox input label: The checkbox input label describes the option users can select or unselect. Together with checkbox input, this makes one checkbox.

Demo

Open the component in Figma.

When to use

Use a checkbox or checkbox group in these scenarios:

• Use a single checkbox when you have a single option that the users can turn on or off but it takes effect after the user clicks a submit button.
• Use a checkbox group when you have multiple selections that can be made. Checkboxes are independent of all the other checkboxes. Checking a box does not affect any other selection.
• Use checkboxes when the experience is primarily desktop.

When not to use

Use another type of select in these scenarios.

Use a switch instead:

• When you want the user to turn the selection on or off immediately.
• When the experience is primarily mobile.

Use a radio group instead:

• When you need a single selection and don’t want to allow any other related selection.
• When you need an active item by default. Radio buttons aren’t independent like checkboxes.

Similar components

Behaviors

States

A checkbox has three states:

• Unselected: The default state of a checkbox.
• Selected: When a user chooses a checkbox.
• Indeterminate: The parent checkbox when checkboxes are nested and the group contains a mix of checked and unchecked children.

Interactions

A checkbox can be selected or unselected from either the checkbox input or the checkbox input label. This provides a better affordance for the user.

Accessibility

Odyssey components are designed and built to meet accessibility requirements out of the box. So, designers and engineers can focus on any accessibility concerns unique to their problem areas.

Our components meet WCAG 2.2 AA criteria and WAI-ARIA guidelines to provide a usable and accessible experience to everyone. See the ARIA guidelines for checkbox.

Content guidelines

Checkbox group label (optional)

• If using more than one checkbox, including a label is recommended.
  If a group of checkboxes is within a larger group of components that already has a group label, an additional group label for the checkbox group isn’t needed.
• The label helps the user understand the group of options provided or describes the actions user take by selecting checkbox(es).
• Use sentence case for group labels.
• Only include a colon (:) at the end of the label if the group of checkboxes is a list.

Don't omit a checkbox group label if it's needed for context, clarity, and accessibility. Users should always be able to tell what is being selected.

Checkbox input label

• The checkbox input label describes the option users may want to select or unselect.
• Make the label clear yet as concise as possible.
  Okta often uses app names, user names, or other known values, so input labels may be preexisting.
• Long labels wrap to a second line, not truncate.
• Make the label positive. For example, Turn on notifications instead of Turn off notifications.
• Order inputs in a logical order:
  - Most likely to least likely to be selected
  - Simplest to most complex operation
  - Least to most risk
• Unless app names or user names, don’t order inputs in alphabetical order because this won’t remain consistent when translated.
• If the checkbox label asks users to agree to terms or service, use the first person. For example: I agree to the Terms of Service.
• Use sentence case for input labels.
• Don't include punctuation after input labels unless the label is a complete sentence.

Hint text (optional)

• Use only if needed to provide in-context descriptions to clarify the grouping or explain the set of options.
• Hint text is always visible.
• Be as concise as possible. Include just the information needed to make the decision or choice.
• Use sentence case.
• Use end punctuation if a complete sentence.
• Hints should not include rich text to avoid visually separating the intended label from the input area.

To solve the repetition of “Allow users to,” make it hint text that explains the set of options and allows each input label to focus on the unique choice.

The repetition of “Allow users to,” doesn’t allow leading with the most important unique text and forces close reading to understand each option.

Error message

Include an appropriate error message for required checkbox groups.

• Default error message:
  Checkbox group: Select at least one option.
  Single checkbox: Select the checkbox to continue.

Content accessibility

Checkbox input label

Whether or not the label is visible in the interface, a label is always needed in code whether it’s for one checkbox label or a checkbox group label.

Figma: Checkbox