CheckboxGroup

Use CheckboxGroup to allow users to select multiple items from a list of individual items, or to mark one individual item as selected.

Anatomy

Edit in Figma

Label: A title that labels the group of options and helps users understand the relationship between the options in the group.

Required indicator: Indicates that a selection is required.

Caption: May be used to provide additional context about the CheckboxGroup when the label alone is not sufficient

Options: A list of options represented using Checkboxes.

Validation message: A message explaining why the selection failed validation. See the form pattern documentation for more information on form validation patterns.

Best practices

• Put Checkboxes in a logical order
• If users are only allowed to select a single option, consider using a RadioGroup instead
• Each Checkbox's state should be independent from other Checkboxes in the group. For example: checking one Checkbox should not check or disable any other Checkboxes