CheckBoxGroup should be used to present a group of options to the user. The user can select a single or multiple options.
- 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.
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.
When using multiple checkboxes in a single FormField, use a CheckBoxGroup. If you're using a single checkbox, use CheckBox.
CheckBoxGroup contains multiple checkboxes and has various states. When enabled, CheckBoxGroup should always allow one or more options to be selected.
Adding a description provides the user additional information about the context or purpose of the CheckBoxGroup.
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.
Used to indicate that CheckBoxGroup cannot be interacted with.
When many options are available and vertical space is limited, a scrollable checkbox group may be considered.
Something missing or looking for more information? Get in touch to help make the HPE Design System better.