Checkbox Group

InstallationCopy Anchor Link

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

You'll also need Checkbox.

UsageCopy Anchor Link

The group holds the list of checked values. Give each Checkbox a value, and give the group a name with aria-label or a legend.

import { Checkbox } from "@/components/ui/checkbox";
import { CheckboxGroup } from "@/components/ui/checkbox-group";
import { Label } from "@/components/ui/label";

<CheckboxGroup aria-label="Frameworks" defaultValue={["next"]}>
  <Label>
    <Checkbox value="next" />
    Next.js
  </Label>
  <Label>
    <Checkbox value="vite" />
    Vite
  </Label>
</CheckboxGroup>;

Parent checkboxCopy Anchor Link

A checkbox with parent checks or clears every value in allValues. It shows a dash when only some are checked.

With a legendCopy Anchor Link

Render a Field as a Fieldset to give the group a visible legend. The field's name is used when the form is submitted.

API referenceCopy Anchor Link

Also accepts every Base UI Checkbox Group prop. Columbus adds a vertical layout.