Forms

Checkbox Group

A collection of checkboxes that enables users to select multiple options from a predefined list.

Basic

A group of checkboxes that lets you select multiple options at once.

Loading...

Installation

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.

This component comes packed with several components to enhance functionality and provide a seamless experience.

Manual installation

npm i react-aria-components @intentui/icons

Anatomy

import { Checkbox, CheckboxGroup } 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">
    <Label>Read</Label>
    <Description>
      Can view content but cannot make changes.
    </Description>
  </Checkbox>
  <Checkbox value="write">
    <Label>Write</Label>
    <Description>
      Can create and modify existing content.
    </Description>
  </Checkbox>
  <Checkbox value="delete">
    <Label>Delete</Label>
    <Description>Can permanently remove content.</Description>
  </Checkbox>
  <Checkbox value="admin">
    <Label>Admin</Label>
    <Description>
      Full access to all actions and settings.
    </Description>
  </Checkbox>
</CheckboxGroup>

Description

Add a description to the checkbox group using the description prop.

Loading...

Validation

The checkbox group is in an error state.

Loading...

Indeterminate

The checkbox group is in an indeterminate state.

Loading...

Controlled

Control the checkbox group value with the value prop.

Loading...

Uncontrolled

Control the checkbox group value with the defaultValue prop.

Loading...

Disabled

Disable the entire checkbox group by passing the isDisabled prop.

Loading...

Read Only

When you need just a read-only checkbox group, pass the isReadOnly prop.

<CheckboxGroup isReadOnly/>
Unlock the full power of
Design Intent UI
Build modern web apps faster with 350+ blocks and polished templates crafted for professionals.
Explore