Primitive · CLI
Checkbox Group
Soft-rect checkbox group — compose with Checkbox (value / parent).
Preview
npx shadcn@latest add @atroui/checkbox-groupInstallation
Agent blurb — install command + no npm UI rule. For agents
npx shadcn@latest add @atroui/checkbox-groupSource lands in your repo. Installation · Registry
Usage
Wrap labeled Checkboxes. Use value on children; parent + allValues for select-all.
tsx
import { Checkbox } from "@/components/ui/checkbox"
import { CheckboxGroup } from "@/components/ui/checkbox-group"
const ALL = ["draft", "review", "ship"]
<CheckboxGroup defaultValue={["draft"]} allValues={ALL}>
<label className="flex items-center gap-2 text-sm">
<Checkbox parent />
Release stages
</label>
<label className="ml-4 flex items-center gap-2 text-sm">
<Checkbox value="draft" />
Draft
</label>
<label className="ml-4 flex items-center gap-2 text-sm">
<Checkbox value="review" />
Review
</label>
<label className="ml-4 flex items-center gap-2 text-sm">
<Checkbox value="ship" />
Ship
</label>
</CheckboxGroup>Checkbox Group