Checkbox Group

CheckboxGroup

Installation

Add the component with the CLI.

npm

pnpm

yarn

bun

npx shadcn@latest add @intentui/checkbox

Composed components

When you install this component via the CLI, it automatically loads all composed components, so you don’t need to add them individually.

field

Manual installation

Install the dependencies, then copy the component source into your project.

npm

pnpm

yarn

bun

npm install react-aria-components @heroicons/react cn

Anatomy

import { CheckboxField, CheckboxGroup, Checkbox } from "@/components/ui/checkbox"
import { Description, Label } from "@/components/ui/field"

<CheckboxGroup defaultValue={["delete"]}>
  <Label>User Permissions</Label>
  <Description>
    Select the permissions you want to grant to the user.
  </Description>
  <CheckboxField value="read">
    <Checkbox>Read</Checkbox>
    <Description>
      Can view content but cannot make changes.
    </Description>
  </CheckboxField>
  <CheckboxField value="write">
    <Checkbox>Write</Checkbox>
    <Description>
      Can create and modify existing content.
    </Description>
  </CheckboxField>
  <CheckboxField value="delete">
    <Checkbox>Delete</Checkbox>
    <Description>Can permanently remove content.</Description>
  </CheckboxField>
  <CheckboxField value="admin">
    <Checkbox>Admin</Checkbox>
    <Description>
      Full access to all actions and settings.
    </Description>
  </CheckboxField>
</CheckboxGroup>