<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>npx shadcn@latest add @dotui/checkbox-groupUse 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>Use the controls below to experiment with different checkbox group props and see the live preview and code update.
<CheckboxGroup defaultValue={["react"]}>
<Label>Select frameworks</Label>
<FieldGroup>
<Checkbox value="react">
<CheckboxIndicator />
<Label>React</Label>
</Checkbox>
<Checkbox value="vue">
<CheckboxIndicator />
<Label>Vue</Label>
</Checkbox>
<Checkbox value="angular">
<CheckboxIndicator />
<Label>Angular</Label>
</Checkbox>
</FieldGroup>
</CheckboxGroup>A checkbox group allows a user to select multiple items from a list of options.
| Prop | Type | Default | |
|---|---|---|---|
boolean | — | ||
boolean | — | ||
ReactNode | function | — | ||
string[] | — | ||
string[] | — | ||
function | — | ||
Last updated on 1/13/2026
Bringing singularity to the web.
Built with passion by @mehdibha.