CheckboxGroup
A checkbox group allows a user to select one or multiple checkbox items.
Import
import { CheckboxGroup, Checkbox } from "@cfa/react-core";Live Editor
Guidelines
When to use
- CheckboxGroup is for multiple related checkbox options.
Do
- Always provide a visible label in sentence case.
- Include optional description text when people need context or constraints on the group.
- Use indeterminate on a parent Checkbox when some but not all children in the group are selected.
- When the group is required, validate on submit. Show a group-level error if nothing is selected.
- Show the description and error message at the same time. Do not hide description when the group is invalid.
Avoid
- Using CheckboxGroup for single selection. Use RadioGroup.
- Using CheckboxGroup for on/off options. Use Switch.
- Nesting groups inside groups. Flatten the structure or use grouping inside Select.
Examples
Disabled
The isDisabled prop applies the following visual style and prevents the user from making a selection.
Description
The description prop provides additional context to the user about the checkbox group or individual checkboxes. You may pass the description prop to the CheckboxGroup or Checkbox component.
Readonly
The isReadOnly prop applies the following visual style and prevents the user from making a selection.
Required
The isRequired prop adds a red asterisk to the checkbox group label.
Controlled
Use the value or defaultValue prop to set the selected items, and onChange to handle selection changes.
Validation
For validation, pass the isRequired prop and add a custom errorMessage.
Click submit with no selection made to get errorMessage.