Checkbox

InstallationCopy Anchor Link

pnpm dlx shadcn@latest add @columbus/checkbox

UsageCopy Anchor Link

Wrap the checkbox in a Label, or pass aria-label, so it has an accessible name. Inside a Field, wrap it in FieldLabel.

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

<Label>
  <Checkbox onCheckedChange={(checked) => console.log(checked)} />
  Accept terms and conditions
</Label>;

For several related checkboxes, use Checkbox Group.

With descriptionCopy Anchor Link

Link the description with aria-describedby so screen readers read it too.

CardCopy Anchor Link

DisabledCopy Anchor Link

API referenceCopy Anchor Link

Also accepts every Base UI Checkbox.Root prop. The check and indeterminate icons are built in.