Checkbox GroupNew

Several checkboxes under one label, to pick any number of options.

$ pnpm dlx shadcn@latest add @dashral/checkbox-group

Notify me by

To maya@driftbox.example

Push notifications

On your phone and desktop

SMS

Only for security alerts

Slack

Connect a workspace first

We'll only send what you pick.

Installation

$ pnpm dlx shadcn@latest add @dashral/checkbox-group

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Or by its full URL: https://dashral.com/r/checkbox-group.json

Usage

example.tsx

1import { CheckboxGroup } from "@/components/dashral/checkbox-group"
2
3<CheckboxGroup
4  label="Notify me by"
5  options={["Email", "Push", "SMS"]}
6  value={channels}
7  onValueChange={setChannels}
8/>

Using the npm package? Import from @dashral/ui/components/checkbox-group instead, here and in the examples; the rest is the same.

API reference

CheckboxGroup

Prop	Type	Default
`label`	`ReactNode` Shown above, linked to the control.	—
`description`	`ReactNode` A hint under the control.	—
`error`	`boolean \| ReactNode` true shows the error style; a message also shows under the control.	—
`labelAction`	`ReactNode` At the end of the label's row, e.g. a “Forgot password?” link or the current value.	—
`withAsterisk`	`boolean` Marks the label with an asterisk, e.g. alongside required.	`false`
`options`	`(string \| { value, label?, description?, icon?, disabled? })[]` The checkboxes. Required.	—
`value / defaultValue`	`string[]` The ticked values, controlled or initial; always in the options' order.	`[]`
`onValueChange`	`(value: string[]) => void` Called with the new value.	—
`variant`	`"default" \| "cards"` Checkboxes with labels, or bordered cards you click anywhere on.	`"default"`
`selectAll`	`boolean \| ReactNode` A checkbox above the rest that ticks or clears them all, half-ticked while some are. true for "Select all".	—
`max`	`number` At most this many; the rest are disabled once it's reached.	—
`color`	`"primary" \| "neutral" \| "info" \| "success" \| "warning" \| "destructive" \| "highlight"` A ticked checkbox (and card).	`"primary"`
`name`	`string` The form field's name; each ticked value is sent under it.	—
`disabled / required`	`boolean` As on other controls.	—
`classNames`	`{ root, label, description, error, group, item, checkbox }` Classes for each part.	—
`className`	`string` The group's classes, e.g. columns: "sm:grid-cols-2".	—

Keyboard

Keys	Action
`Tab`	Move between checkboxes
`Space`	Tick or clear the focused one

Accessibility

With label, description or error, the id, aria-describedby and aria-invalid are wired up for you.
role="group" named by the label, so each checkbox is read with it.
"Select all" is a real checkbox with the mixed state while some are ticked.