Example
Patterns
CheckboxGroup accepts multiple Checkbox elements as children. Each Checkbox represents an option that can be selected, labeled by its children.
Note: A Checkbox cannot be used outside of a CheckboxGroup.
Label
Each CheckboxGroup should be labelled using the label prop. If a visible label isn’t appropriate, use the aria-label prop to identify the control for accessibility.
Custom labels should be wrapped with the Text component.
Value
CheckboxGroup only allows single selection. An initial, uncontrolled value can be provided to the CheckboxGroup using the defaultValue prop. Alternatively, a controlled value can be provided using the value and onChange props.
Props
Orientation
Checkbox groups are vertically oriented by default. The orientation prop can be used to change the orientation to “horizontal”.
Disabled
A radio group that isDisabled shows that a field exists, but is not currently available.
You can also provide the isDisabled prop to individual radio buttons.
Required
A CheckboxGroup can be marked as required by setting the isRequired prop.
Description
The description communicates a hint or helpful information, such as specific requirements for what to choose.
Error message
The errorMessage communicates an error when the selection requirements aren’t met, prompting the user to adjust what they had originally selected.