Checkbox Group
Group multiple checkboxes with shared state management and layout options
The checkbox group manages the shared state of several related Checkbox controls and wires up a parent checkbox for select-all behavior. Use it for multi-select preference lists, permission sets, or any group where selections combine into one value.
Preview
Installation
Usage
Examples
With Descriptions
Add a description below each option's label for extra context.
Card Style
Wrap each option in a bordered card to make the whole row clickable.
Select subscription plans
Controlled
Pass value and onValueChange to manage the selected values yourself.
Notification Preferences
Disabled Options
Set disabled on an individual Checkbox to lock that option.
Parent Checkbox
Use a parent checkbox to toggle every option at once, with an indeterminate state for partial selections.
Nested Groups
Nest groups to build hierarchical, tree-like selections.
Form Integration
Use Field and Fieldset with the render prop. See the Forms guide for more patterns.
API Reference
The CheckboxGroup component is built on top of Base UI's CheckboxGroup. All Base UI props are supported and passed through unchanged. Our implementation only adds default layout styling, so there are no custom props or modified defaults.
For the complete Base UI API, including value, defaultValue, onValueChange, and allValues, see the Base UI CheckboxGroup documentation.