dotUI

Checkbox Group

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

Docs
React frameworks
<CheckboxGroup defaultValue={["nextjs"]}>
  <Label>React frameworks</Label>
  <FieldGroup>
    <Checkbox value="nextjs">
      <CheckboxIndicator />
      <Label>Next.js</Label>
    </Checkbox>
    <Checkbox value="remix">
      <CheckboxIndicator />
      <Label>Remix</Label>
    </Checkbox>
    <Checkbox value="gatsby">
      <CheckboxIndicator />
      <Label>Gatsby</Label>
    </Checkbox>
  </FieldGroup>
</CheckboxGroup>

Installation

pnpm dlx shadcn@latest add @dotui/checkbox-group

Usage

Use CheckboxGroup to allow users to select multiple items from a list of individual items, or to mark one individual item as selected.

import { Checkbox, CheckboxIndicator } from "@/components/ui/checkbox";
import { CheckboxGroup } from "@/components/ui/checkbox-group";
<CheckboxGroup defaultValue={["react"]}>
  <Label>Frameworks</Label>
  <Checkbox value="react">
    <CheckboxIndicator />
    <Label>React</Label>
  </Checkbox>
  <Checkbox value="vue">
    <CheckboxIndicator />
    <Label>Vue</Label>
  </Checkbox>
</CheckboxGroup>

Playground

Use the controls below to experiment with different checkbox group props and see the live preview and code update.

Select frameworks
orientation

API Reference

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

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

On this page

On this page

Last updated on 12/21/2025

dotUI

Bringing singularity to the web.

Community

Built with passion by @mehdibha.