Checkbox Group

A checkbox group allows a user to select multiple items from a list of options.

Select frameworks
<CheckboxGroup defaultValue={["react"]}>
  <Label>Select frameworks</Label>
  <FieldGroup>
    <Checkbox value="react">
      <CheckboxControl />
      <Label>React</Label>
    </Checkbox>
    <Checkbox value="vue">
      <CheckboxControl />
      <Label>Vue</Label>
    </Checkbox>
    <Checkbox value="angular">
      <CheckboxControl />
      <Label>Angular</Label>
    </Checkbox>
  </FieldGroup>
</CheckboxGroup>

Installation

npx shadcn@latest add @dotui/checkbox-group

Usage

Use CheckboxGroup to allow users to select multiple items from a list of options.

import { CheckboxGroup } from '@/components/ui/checkbox-group'
import { Checkbox, CheckboxControl } from '@/components/ui/checkbox'
import { FieldGroup, Label } from '@/components/ui/field'
<CheckboxGroup defaultValue={['nextjs']}>
  <Label>React frameworks</Label>
  <FieldGroup>
    <Checkbox value="nextjs">
      <CheckboxControl />
      <Label>Next.js</Label>
    </Checkbox>
    <Checkbox value="remix">
      <CheckboxControl />
      <Label>Remix</Label>
    </Checkbox>
  </FieldGroup>
</CheckboxGroup>

Selection

Use defaultValue for uncontrolled checkbox groups, or value and onChange for controlled checkbox groups.

<CheckboxGroup defaultValue={['nextjs']}>{/* ... */}</CheckboxGroup>
const [frameworks, setFrameworks] = useState<string[]>(['nextjs'])

;<CheckboxGroup value={frameworks} onChange={setFrameworks}>
  {/* ... */}
</CheckboxGroup>

Validation

Set isRequired to require a selection, or drive isInvalid yourself. Render errors with FieldError — with the default validationBehavior="native" it surfaces the browser's message on form submit; use validationBehavior="aria" to validate live without native form semantics.

import { CheckboxGroup } from '@/components/ui/checkbox-group'
import { FieldError, FieldGroup, Label } from '@/components/ui/field'
;<CheckboxGroup isRequired>
  <Label>React frameworks</Label>
  <FieldGroup>{/* ... */}</FieldGroup>
  <FieldError>Please select a framework.</FieldError>
</CheckboxGroup>

Examples

Default

React frameworks

Cards

React frameworks

Notification Preferences

ChannelsWhere we reach you.
Notification typesWhat we notify you about.

Event RSVP Form

Dietary restrictions
Activities
ConsentRequired to complete your RSVP.

API Reference

CheckboxGroup

A checkbox group allows a user to select multiple items from a list of options.

PropType
ReactNode | function
boolean
boolean
string[]
string[]
function

Checkbox

A checkbox allows a user to select multiple items from a list of individual items, or to mark one individual item as selected.

PropType
ReactNode | function
boolean
RefObject<HTMLInputElement | null>
boolean
boolean
boolean
boolean
function

Last updated on 7/7/2026