Checkbox Group

StableBase UI

Live preview

applebananacherry

Installation

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

This also merges the token layer and installs src/lib/cn.ts plus @base-ui/react. For the manual route — prerequisites, components.json, and app-level setup — see Installation.

Usage

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

Example

The preview above, with its source. This is the demo module verbatim, so the code and the thing it renders cannot drift apart.

applebananacherry

<CheckboxGroup aria-label="Fruits">
  {fruits.map((fruit) => (
    <label key={fruit} className="flex items-center gap-2 text-sm">
      <Checkbox name={fruit} />
      {fruit}
    </label>
  ))}
</CheckboxGroup>

API reference

Each part forwards every prop of its Base UI counterpart; the tables list the ones declared on the part itself. See Base UI's reference for the inherited element props.

CheckboxGroup

PropTypeDefaultDescription

valuestring[]—Names of the checkboxes in the group that should be ticked.

defaultValuestring[]—Names of the checkboxes in the group that should be initially ticked.

onValueChange((value: string[], eventDetails: CheckboxGroupChangeEventDetails) => void)—Event handler called when a checkbox in the group is ticked or unticked.

allValuesstring[]—Names of all checkboxes in the group.

disabledbooleanfalseWhether the component should ignore user interaction.

Accessibility

Behaviour, focus management, and ARIA wiring come from Base UI's Checkbox Group — see its reference for the full keyboard map.

Disabled parts mute their contents rather than the element, keeping the focus ring at full strength where the part stays focusable.

Source

src/components/ui/checkbox-group/checkbox-group.tsx — no next/* imports, so it drops into any React 19 + Tailwind v4 app.

Checkbox Group

On this page