Checkbox group

Several checkboxes, one value array, wrapping the Base UI Checkbox Group. Add a parent checkbox and select-all with an indeterminate middle state comes free.

Playground

With the parent row on, uncheck one channel and the parent drops to the indeterminate dash; Disabled greys the whole group at once. The Code tab shows the markup for exactly what you've configured.

All notifications Email Text message Push

States

None, some, and all checked: the parent row follows the members, unchecked, dash, then check. Click any row to watch it move; keyboard focus rings each box in turn, and hover does nothing visible on purpose.

Styling states

The group carries data-disabled when disabled as a whole; each member is a regular Checkbox with its own data-checked and data-indeterminate, so a softer parent dash is one rule scoped to the group:

.ub-checkbox-group .ub-checkbox[data-indeterminate] {
  background: var(--ub-accent-hover);
}

.ub-checkbox-group[data-disabled] {
  color: var(--ub-text-tertiary);
}

Props

The group passes the full Base UI API through, and the checkboxes inside are regular Bones Checkboxes. The essentials:

Prop	Type	Default	Description
`defaultValue`	`string[]`	–	Checked values on first render, when uncontrolled.
`value`	`string[]`	–	Controlled checked values. Pair with onValueChange.
`onValueChange`	`(value: string[]) => void`	–	Called with the new array when any member changes.
`allValues`	`string[]`	–	Every member value; required for a parent checkbox.
`disabled`	`boolean`	`false`	Disables every checkbox inside.
`Checkbox.value`	`string`	–	Joins the checkbox to the group under this value.
`Checkbox.parent`	`boolean`	`false`	Makes this checkbox the select-all parent.

Agent instructions

Working with a coding agent? Paste this into its context, or point it at llms.txt for the whole library.

CheckboxGroup, from @usebones/react.
- Wraps Bones Checkboxes; each joins via value="...". Group state: defaultValue or value + onValueChange (string arrays).
- Select-all: pass allValues={[...]} on the group and render one <Checkbox parent /> row; it checks, unchecks, and shows indeterminate automatically.
- disabled on the group disables every member.
- Wrap each checkbox in a <label> with its text so the text is clickable.
- Restyle in CSS via .ub-checkbox-group, [data-disabled] on the group, and the member Checkbox's [data-checked], [data-indeterminate], [data-disabled]. Tokens only.