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.
Validation
Validation is used to show that the CheckBoxGroup does not meet the validation requirements of its bounding FormField.
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.
Still have questions?
Something missing or looking for more information? Get in touch to help make the HPE Design System better.