<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>
<Checkbox value="gatsby">
<CheckboxControl />
<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 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>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>;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">
<CheckboxControl />
<Label>React</Label>
</Checkbox>
<Checkbox value="vue">
<CheckboxControl />
<Label>Vue</Label>
</Checkbox>
<Checkbox value="angular">
<CheckboxControl />
<Label>Angular</Label>
</Checkbox>
</FieldGroup>
</CheckboxGroup>A checkbox group allows a user to select multiple items from a list of options.
| Prop | Type | Default | |
|---|---|---|---|
ReactNode | function | — | ||
boolean | — | ||
boolean | — | ||
DOMRenderFunction<"div", CheckboxGroupRenderProps> | — | ||
string[] | — | ||
string[] | — | ||
function | — | ||
A checkbox allows a user to select multiple items from a list of individual items, or to mark one individual item as selected.
| Prop | Type | Default | |
|---|---|---|---|
ReactNode | function | — | ||
boolean | — | ||
RefObject<HTMLInputElement | null> | — | ||
boolean | — | ||
boolean | — | ||
boolean | — | ||
boolean | — | ||
DOMRenderFunction<"div", CheckboxFieldRenderProps> | — | ||
function | — | ||
Last updated on 5/22/2026