HPE
Design System
Foundation
Components
Templates
Learn
Jump to section
Guidance
Best practices
Usage
Accessibility
Variants
With description
Validation
With options as array of objects
Disabled
Scroll
Components

CheckBoxGroup

CheckBoxGroup is a component that presents related checkbox options.

Guidance

CheckBoxGroup should be used to present a group of options to the user. The user can select a single or multiple options.

Best practices

  • CheckBoxGroup should be used to select zero or more of options from a list.
  • In a CheckBoxGroup, options are independent from one another.
  • Settings changed by checkboxes should not take effect until the user clicks to proceed.
  • It is recommended to have only 10 or fewer options in a CheckBoxGroup. Use multiple CheckboxGroups if necessary.

Usage

The dos for CheckBoxGroup:

  • Always label CheckBoxGroups with short and concise labels.
  • Give every CheckBox in the group a short, but descriptive value.
  • Clearly separate Checkbox Groups from other groups on the same page.
  • Organize Checkboxes in a logical order by grouping related options.
  • Consider placing most common options first in the group.

The don'ts for CheckBoxGroup:

  • Don’t align checkboxes horizontally in a group.
  • Refrain from using CheckboxGroup when only one item can be selected from a list.

Accessibility

When using multiple checkboxes in a single FormField, use a CheckBoxGroup. If you're using a single checkbox, use CheckBox.

Variants

CheckBoxGroup contains multiple checkboxes and has various states. When enabled, CheckBoxGroup should always allow one or more options to be selected.

With description

Adding a description provides the user additional information about the context or purpose of the CheckBoxGroup.

Description

Validation

Validation is used to show that the CheckBoxGroup does not meet the validation requirements of its bounding FormField.

Select at least one checkbox option to resolve error.

With options as array of objects

CheckBoxGroup options are typically an array of strings, but they can also be an array of objects.

Disabled

Used to indicate that CheckBoxGroup cannot be interacted with.

Scroll

When many options are available and vertical space is limited, a scrollable checkbox group may be considered.

Related

Related content you may find useful when using CheckBoxGroup.

HPE Forms Preview

Forms

Common form use cases from application configuration to payment acceptance.

RadioButtonGroup

RadioButtonGroup is a component that offers related options to a user, but only allows them to choose one.

CheckBox

CheckBox is a square design element that when clicked accepts the choice offered.

Select

Select is a flexible input field that allows users to choose from a list of options.

Still have questions?

Something missing or looking for more information? Get in touch to help make the HPE Design System better.

Edit this page