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

Checkbox Anatomy

Checkbox Anatomy

  1. Checkbox group label : The label helps the user understand the group of options.
  2. Group hint text (optional): The text clarifies the group or explains the set of options.
  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.
  5. Input hint text (optional): The text clarifies or explains more about the individual checkbox input.

Demo

Storybook failed to load. Please connect to the VPN to access.

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

 

Variants

Inline

For checkboxes that appear on the same horizontal line as another field or for checkbox groups that appear on the same horizontal line.  This variant allows hidden labels.

Inline checkbox group 1
Inline checkbox group 2

Behaviors

States

Unselected

The default state of a checkbox.

Selected

When a user chooses a checkbox.

Disabled

A user isn’t allowed to change the selected or unselected status. And the values of disabled inputs will not be submitted. Checkboxes can be disabled individually or as a group.

Indeterminate

The parent checkbox when checkboxes are nested and the group contains a mix of checked and unchecked children.

Error

If the input is required, include an inline error message. For example, Select at least one option.

Checkbox error single

Inline errors may include multiple errors.

Checkbox error multiple

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.
    • If using an inline variant, the label can alternatively be hidden.
      • In Figma, you can either hide the label layer, or use the various Input field subcomponents under Hidden utilities in the UI kit.
  • 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.

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)

  • Group hint text: Use only if needed to provide in-context information to clarify the entire checkbox group or explain the set of options.
  • Input hint text: Use to provide more information about a single checkbox input.
    • Be concise.
    • Use hint text only when necessary. For example, if one input has hint text, the others don’t need filler hint text for balance.
  • 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.
  • A link can be included. For example, Learn more about app access requests.
    Use an external link icon when necessary.
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.

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.

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

 

Inline checkbox group label (optional)

If using the inline variant, the purpose of the input with a hidden label must be made clear in some other way contextually. In these cases, consult with the Odyssey team for an accessibility review.

  • In code, the label prop is still required. The label will be made accessible to screen reader text.
  • An HTML label element will still be rendered but visually hidden.

 

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