# CheckboxGroup

Multiple choices with connected selected rows and fluid hover.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).







## Preview [#preview]

### Controlled selection [#controlled-selection]

<ComponentPreview src="examples/components/checkbox-group.tsx">
  <CheckboxGroupDemo />
</ComponentPreview>

### Select all and indeterminate [#select-all-and-indeterminate]

<ComponentPreview src="examples/components/checkbox-group-controlled.tsx">
  <CheckboxGroupControlledDemo />
</ComponentPreview>

### Compact and disabled [#compact-and-disabled]

<ComponentPreview src="examples/components/checkbox-group-compact.tsx">
  <CheckboxGroupCompactDemo />
</ComponentPreview>

## Installation [#installation]

<CodeBlockCommand __npm__="`npx shadcn@latest add ${SITE.URL}/r/checkbox-group.json`" __pnpm__="`pnpm dlx shadcn@latest add ${SITE.URL}/r/checkbox-group.json`" __yarn__="`yarn dlx shadcn@latest add ${SITE.URL}/r/checkbox-group.json`" __bun__="`bunx shadcn@latest add ${SITE.URL}/r/checkbox-group.json`" />

## Usage [#usage]

```tsx
import { CheckboxGroup, CheckboxItem } from "@/components/ui/checkbox-group";

<CheckboxGroup aria-label="Interests" defaultValue={["science"]}>
  <CheckboxItem value="science" label="Science" description="New discoveries" />
  <CheckboxItem value="history" label="History" />
</CheckboxGroup>;
```

## API Reference [#api-reference]

Group uses Base UI `value`, `defaultValue` (string arrays), `onValueChange`, `disabled` and form props. Give the group an accessible name. CheckboxItem composes the standalone Checkbox, sharing its check-drawing animation, and accepts Base UI Checkbox Root props and requires `label`; `description` is optional. Both individual and group disabling are supported. Tab moves between checkboxes; Space changes selection. Density follows SizeProvider.