Build · New

Checkbox Group

Checkboxes under one label, with shared helper or error text, and an optional “select all” that turns indeterminate when only some are checked.

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Installation

SoonInstalling from the registry opens at launch. Until then the command below is what it will be.

npx shadcn@latest add @ritla/checkbox-group

Dependencies it brings: @base-ui/react

Usage

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

<CheckboxGroup label="Notify me by" value={value} onValueChange={setValue}>
  <Checkbox value="email">Email</Checkbox>
  <Checkbox value="sms">Text message</Checkbox>
</CheckboxGroup>

Examples

Error

error marks every box and puts the message under the group.

API reference

CheckboxGroup

Prop	Type	Description
`label`	`ReactNode`	Figma's Label, as the `legend`.
`value / defaultValue`	`string[]`	Values of the checked boxes.
`onValueChange`	`(value: string[]) => void`	On every toggle.
`allValues`	`string[]`	Every value, for “select all” (`<Checkbox parent>`).
`required / helperText / error / disabled`	`…`	As on Input Field.

Accessibility

Keyboard

Keys are written for left-to-right. In right-to-left the arrow keys swap: the one pointing toward the reading direction moves forward.

Key	Action
`TabSpace`	Tab between boxes; Space toggles.

ARIA

A fieldset with a legend; the helper text or error is linked to the group.
“Select all” is aria-checked="mixed" when some children are checked.

Arabic and RTL notes

Mirrors

The boxes sit at the inline start (the right).

Does not mirror

The checks never mirror.

Numerals: No numbers.
Arabic typography: The label is label-12, options label-16 Medium.

All components ›