The CheckboxGroup component provides a container for grouping related checkboxes with shared state management.
Installation
import { CheckboxGroup } from "@craftdotui/baseui/components/checkbox-group";
import { Checkbox, CheckboxIndicator } from "@craftdotui/baseui/components/checkbox";
<CheckboxGroup>
<div className="flex items-center gap-2">
<Checkbox value="option1">
<CheckboxIndicator />
</Checkbox>
<label>Option 1</label>
</div>
<div className="flex items-center gap-2">
<Checkbox value="option2">
<CheckboxIndicator />
</Checkbox>
<label>Option 2</label>
</div>
</CheckboxGroup>
Controlled selected values.
Callback when selection changes.
Disable all checkboxes in the group.
Examples
Basic Group
<CheckboxGroup>
<div className="flex items-center gap-2">
<Checkbox value="react">
<CheckboxIndicator />
</Checkbox>
<label>React</label>
</div>
<div className="flex items-center gap-2">
<Checkbox value="vue">
<CheckboxIndicator />
</Checkbox>
<label>Vue</label>
</div>
<div className="flex items-center gap-2">
<Checkbox value="angular">
<CheckboxIndicator />
</Checkbox>
<label>Angular</label>
</div>
</CheckboxGroup>
Controlled Group
const [selected, setSelected] = useState(['react', 'vue']);
<CheckboxGroup value={selected} onValueChange={setSelected}>
<div className="flex items-center gap-2">
<Checkbox value="react">
<CheckboxIndicator />
</Checkbox>
<label>React</label>
</div>
<div className="flex items-center gap-2">
<Checkbox value="vue">
<CheckboxIndicator />
</Checkbox>
<label>Vue</label>
</div>
</CheckboxGroup>
With Default Selection
<CheckboxGroup defaultValue={['option1']}>
{/* Checkboxes */}
</CheckboxGroup>
Accessibility
- Built on @base-ui/react for accessibility
- Manages group state automatically
- Works with keyboard navigation
- Proper ARIA attributes