Checkbox Group
group of checkboxes with shared state and select-all support
Loading...
Installation
pnpm dlx shadcn@latest add https://prototyper-ui.com/r/checkbox-group.jsonnpx shadcn@latest add https://prototyper-ui.com/r/checkbox-group.jsonyarn dlx shadcn@latest add https://prototyper-ui.com/r/checkbox-group.jsonbunx --bun shadcn@latest add https://prototyper-ui.com/r/checkbox-group.jsonThis will add the following files to your project:
components/ui/checkbox-group.tsx
Usage
import { CheckboxGroup } from "@/components/ui/checkbox-group";
import {
Checkbox,
CheckboxControl,
CheckboxIndicator,
} from "@/components/ui/checkbox";
<CheckboxGroup defaultValue={["option-1"]}>
<Checkbox value="option-1">
<CheckboxControl>
<CheckboxIndicator />
</CheckboxControl>
Option 1
</Checkbox>
<Checkbox value="option-2">
<CheckboxControl>
<CheckboxIndicator />
</CheckboxControl>
Option 2
</Checkbox>
</CheckboxGroup>;Anatomy
<CheckboxGroup>
<Checkbox>
<CheckboxControl>
<CheckboxIndicator />
</CheckboxControl>
{/* label text */}
</Checkbox>
</CheckboxGroup>| Sub-component | data-slot | Purpose | Required |
|---|---|---|---|
CheckboxGroup | checkbox-group | Root container, manages group state | Yes |
Checkbox | checkbox | Individual checkbox (from checkbox component) | Yes |
CheckboxControl | checkbox-control | Visual box (from checkbox component) | Yes |
CheckboxIndicator | checkbox-indicator | Checkmark icon (from checkbox component) | Yes |
Examples
Parent (Select All)
Loading...
Disabled
Loading...
Controlled
Loading...
Styling
Data Slots
Use data-slot attributes to target specific parts of the checkbox group:
| Slot name | Element |
|---|---|
checkbox-group | Root container for all checkboxes |
Customization Examples
/* Horizontal layout */
[data-slot="checkbox-group"] {
@apply flex-row gap-4;
}{
/* Override layout via className */
}
<CheckboxGroup className="flex-row gap-6">{/* ... */}</CheckboxGroup>;API Reference
CheckboxGroup
Root container that manages which checkboxes are checked.
Prop
Type
All Base UI CheckboxGroup props are forwarded via ...props.
Accessibility
Keyboard Interactions
| Key | Action |
|---|---|
Space | Toggles the focused checkbox |
Tab | Moves focus between checkboxes |
ARIA Attributes
CheckboxGrouprenders withrole="group".- Each
Checkboxwithin renders withrole="checkbox". aria-checkedis set totrue,false, ormixed(for parent checkbox) based on state.aria-disabledis set when the group or an individual checkbox is disabled.- The parent checkbox shows
mixedstate when some but not all children are checked.