Checkbox Group

Group related checkboxes with shared selection state and consistent spacing.

Newforminteractivegroup

Loading preview...

Installation

npx baseui-cn add checkbox-group

Usage

import { Checkbox } from "@/components/ui/checkbox"
import { CheckboxGroup } from "@/components/ui/checkbox-group"
import { Label } from "@/components/ui/label"

<CheckboxGroup aria-label="Select libraries" defaultValue={["baseui"]}>
  <Label>
    <Checkbox value="baseui" />
    Base UI
  </Label>
  <Label>
    <Checkbox value="baseui-cn" />
    baseui-cn
  </Label>
</CheckboxGroup>

Notes

Use CheckboxGroup when several checkboxes belong to the same question or preference set. It keeps layout and shared state handling together while letting each checkbox stay fully composable.

API Reference

See the Base UI CheckboxGroup documentation for the full API reference, including all props, data attributes, and CSS classes.