Skip to main content

Checkbox Group

A checkbox group is a helper component that groups Checkbox components into a visual and functional group.

Overview

Checkbox groups offer users a binary selection method, allowing them to make multiple selections from a predefined set of options. Each checkbox functions independently, providing immediate feedback through its checked or unchecked state.

These groups are frequently utilised in forms, settings panels, and various interfaces requiring users to make multiple selections or provide input from predefined options.

Four vertically aligned checkboxes with 'Restaurant settings' group label with second option checked.

Dos and Don’ts

Do
  • Ensure each checkbox has a concise and descriptive label that clearly indicates what selecting it will entail.
  • Use a minimum of 2 checkboxes within a group.
Don't
  • If the user can only select one option from a group, radio buttons should be used instead of checkboxes.
  • Limit the number of checkboxes presented to users to avoid overwhelming them with choices.

Anatomy

Three horizontally aligned checkboxes with numbers specifying four different parts of checkbox group anatomy.
  1. Form label (Optional): The form label provides necessary content / information to a form.
  2. Checkbox input: A checkbox input indicates the appropriate state. By default it is unselected.
  3. Checkbox label: Describes the information you want to select or unselect.
  4. Assistive text (Optional): The assistive text provides additional instructional information / error / success messaging for the whole checkbox group.

Variations

Checkbox groups can be laid out both horizontally and vertically depending on the use case and the structure of the UI. Where possible, arrange the checkbox group vertically for easier reading.

Horizontal

Three horizontally aligned checkboxes with group label.

Vertical

Three vertically aligned checkboxes with group label.

Modifiers

Form label

A form label is recommended to provide the user context of the form element and it’s content.

Three horizontally aligned checkboxes with group label.
Three horizontally aligned checkboxes without group label.

Assistive text

Assistive text is used where needed to provide additional information or error / success messaging regarding the whole form element, and never to individual checkboxes. The assistive text is always used for an error state to provide the user with the information required to complete the form element.

Three horizontally aligned checkboxes with group label and red assistive text underneath specifying error state.

Content

All content should use sentence case.

Label

  • Always use clear and concise labels for checkbox group.

Overflow

Multiple words overflow

When the label exceeds the available width, the label will wrap onto a new line. Checkboxes with the same row remain top aligned for consistency, and any additional rows underneath move down to accommodate the additional content.

Six horizontally aligned checkboxes. First checkbox has a label that overflows to a second line.

States

Individual checkbox’s have their own interactive states: default, hover, active, and focus. However, some states apply to the group as a collective because they affect all checkboxes: error and disabled.

Three horizontally aligned checkboxes with group label and red assistive text underneath specifying error state.
Three horizontally aligned checkboxes with group label. Checkbox boxes are greyed out to specify a disabled state.

Examples

LTR examples

Here are some examples of the component in a left-to-right context:

Two vertically aligned checkboxes with a group label aligned to the right.

RTL examples

Here are some examples of the component in a right-to-left context:

Two vertically aligned checkboxes with a group label aligned to the left.

Resources

Figma Component
 Stable
Figma Documentation
 Stable
Web Components
 Beta
Vue [Fozzie]
 N/A
React [Snacks]
 Stable
iOS JustUI [UI Kit]
 N/A
iOS PIE [SwiftUI]
 N/A
Android PIE [Compose & Views]
 N/A