Forms & Input

CheckboxGroup

Multi-select checkbox list with an optional tri-state select-all row, for patterns like permissions and notification preferences.

Props

CheckboxGroup extends HTMLAttributes<HTMLDivElement>. Renders as role="group". Each option becomes a CheckboxField.

CheckboxGroupProps props

Prop	Type	Default	Description
`options`	`CheckboxGroupOption[]`	—	Available choices. Each has value, label, optional description and disabled.
`value`	`string[]`	—	Selected values.
`onChange`	`(value: string[]) => void`	—	Selection handler.
`inline`	`boolean`	—	Lay options in a row instead of stacked.
`selectAllLabel`	`ReactNode`	—	Adds a leading tri-state select-all row.
`disabled`	`boolean`	—	Disables the entire group.

CheckboxGroupOption has these fields:

CheckboxGroupOption props

Prop	Type	Default	Description
`value`	`string`	—	Unique option value.
`label`	`ReactNode`	—	Display label.
`description`	`ReactNode`	—	Dim secondary line below the label.
`disabled`	`boolean`	—	Disables this specific option.

CheckboxGroup with select-all

HTMLCSSJavaScript

CheckboxGroup inline

ImportTSX

import { CheckboxGroup } from "@solarius/onset";
import type { CheckboxGroupOption, CheckboxGroupProps } from "@solarius/onset";