CheckboxGroup
A checkbox group with an array of selected values.
Children are Checkbox or Toggle; onChange returns an array of values. label, description, and errorMessage add a group heading, a hint, and error text. Items keep their own disabled, size, and name.
Live example
Example controls
Usage
import { Checkbox, CheckboxGroup } from '@prosazhin/pbcomponents';
<CheckboxGroup
label='Options'
defaultValue={['One']}
>
{['One', 'Two', 'Three', 'Four', 'Five'].map((item) => (
<Checkbox
key={item}
value={item}
>
{item}
</Checkbox>
))}
</CheckboxGroup>;Component API
| Prop | Type / variants | Purpose | Default |
|---|---|---|---|
children | Checkbox[] | Toggle[] | Group items; Checkbox and Toggle can be combined. Items keep their own disabled, size and name. | — |
size | 's' | 'm's · m | Component size. | — |
label | ReactNode | Group heading (legend). | — |
description | ReactNode | Hint below the group heading. | — |
errorMessage | ReactNode | Error text below the group; linked to it via aria-describedby. | — |
name | string | Shared name of the native inputs. | — |
disabled | boolean | Disables interaction. | false |
value | string[] | Selected values. | — |
defaultValue | string[] | Initial value when uncontrolled. | [] |
onChange | (values: string[]) => void | Reports the selected values. | — |
className | string | Class of the root element. | — |
Native HTML attributes are accepted where the component renders the corresponding element. className props only affect styling.