Skip to main content

dotUI

Checkbox Group

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

On this page
Select frameworks
Props
<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>

Examples

Default

React frameworks

With Description

React frameworksYou can pick any frameworks.

Invalid

React frameworks
Please select a framework.

Disabled

React frameworks

ReadOnly

React frameworks

Required

React frameworks

Cards

React frameworks

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 6/16/2026