/// Inputs

CheckboxGroup

A set of checkboxes sharing one array value — the multi-select counterpart to RadioGroup.

import { CheckboxGroup, CheckboxGroupItem } from "@protocore/pds";

View as Markdown

Basics

Wrap CheckboxGroup.Items in a CheckboxGroup.Root. Each item takes a value and a label; the group owns a string[] and is controllable via value / defaultValue.

Read — fetch resourcesWrite — create and updateDelete — remove resourcesAdmin — manage members

Controlled

Drive the selection from state with value + onValueChange. The callback receives the next array on every toggle.

EmailSMSPush

[email]

Horizontal

Set orientation="horizontal" to lay the items in a wrapping row — good for a compact set of filters.

SSRStaticEdgeNode

When to use it

Use a CheckboxGroup when any number of options in a small, visible set may be selected at once — permissions, scopes, notification channels. When exactly one option applies, use RadioGroup. When the option list is long or better searched than scanned, use MultiSelect.

Usage

Give the group an accessible name via a wrapping `Field` label or `aria-label`.
Keep option labels parallel in structure and length.
Order options by frequency or logical grouping.

Don't

Don't use it for a single on/off — use a standalone Checkbox.
Don't use it for one-of-many — use RadioGroup.
Don't overflow a dozen options into a group — use MultiSelect.

Accessibility

Keys	Action
`Tab`	Move focus to the next checkbox in the group.
`Space`	Toggle the focused checkbox.

The container is a `role="group"`; label it with `aria-label` or a wrapping `Field`.
Each item is a real checkbox with `aria-checked`; every item is its own Tab stop.
A group-level `disabled` disables every item.

`CheckboxGroup` props

Prop	Type	Default	Description
`aria-label`	`string`	—	Accessible name for the group (or label it via a wrapping Field).
`className`	`string`	—
`defaultValue`	`string[]`	—	Initial selection when uncontrolled. Default `[]`.
`disabled`	`boolean`	—	Disable every item in the group.
`name`	`string`	—	Shared `name` applied to every item's native input (for form submission).
`onValueChange`	`((value: string[]) => void)`	—	Fires with the next selection whenever an item toggles.
`orientation`	`enum`	`vertical`	Orientation of the item stack. Default `"vertical"`.
`style`	`CSSProperties`	—
`value`	`string[]`	—	Controlled list of selected values. Pair with `onValueChange`.

`CheckboxGroup.Item` props

Prop	Type	Default	Description
`className`	`string`	—	Extra class on the checkbox.
`disabled`	`boolean`	—	Disable just this item.
`label`	`ReactNode`	—	Text rendered beside the box (sans 14).
`value` *	`string`	—	This item's value — added to / removed from the group's array.