Checkbox Group
Installation
Install the component via the CLI in one command.
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.
Manual installation
Use this approach if you prefer to install and wire up the component yourself instead of using the CLI.
npm install react-aria-components @heroicons/react tailwind-merge
Anatomy
import { Checkbox, CheckboxGroup, CheckboxLabel } 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>
<Checkbox value="read">
<CheckboxLabel>Read</CheckboxLabel>
<Description>
Can view content but cannot make changes.
</Description>
</Checkbox>
<Checkbox value="write">
<CheckboxLabel>Write</CheckboxLabel>
<Description>
Can create and modify existing content.
</Description>
</Checkbox>
<Checkbox value="delete">
<CheckboxLabel>Delete</CheckboxLabel>
<Description>Can permanently remove content.</Description>
</Checkbox>
<Checkbox value="admin">
<CheckboxLabel>Admin</CheckboxLabel>
<Description>
Full access to all actions and settings.
</Description>
</Checkbox>
</CheckboxGroup>Examples
Description
Add a description to the checkbox group using the description prop.
Validation
The checkbox group is in an error state.
Indeterminate
The checkbox group is in an indeterminate state.
Controlled
Control the checkbox group value with the value prop.
Uncontrolled
Control the checkbox group value with the defaultValue prop.
Disabled
Disable the entire checkbox group by passing the isDisabled prop.
Read only
When you need just a read-only checkbox group, pass the isReadOnly prop.
<CheckboxGroup isReadOnly/>Component API
Checkbox
The Checkbox component is used for a single selectable option.
| Prop | Type | Default |
|---|---|---|
className | string | - |
CheckboxGroup
The CheckboxGroup component groups related checkbox options.
| Prop | Type | Default |
|---|---|---|
className | string | - |
See the React Aria for the full API reference.
