Checkbox / CheckboxGroup

Two components: Checkbox for a standalone toggle, and CheckboxGroup for a labelled set of related checkboxes. Both wrap the corresponding React Aria primitives.

Add via CLI

npx @a2ra/cli add checkbox

Standalone

Group

Example JSON

{
  "type": "CheckboxGroup",
  "props": {
    "label": "Interests",
    "name": "interests",
    "orientation": "horizontal"
  },
  "children": [
    { "type": "Checkbox", "props": { "label": "Design", "value": "design" } },
    { "type": "Checkbox", "props": { "label": "Engineering", "value": "eng" } }
  ]
}

Checkbox props

Prop	Type	Description
`label`	`string`	Visible label text
`value`	`string`	Value submitted with the form
`name`	`string`	Form field name
`isSelected`	`boolean`	Controlled checked state
`defaultSelected`	`true` `false` default	Uncontrolled default
`isDisabled`	`true` `false` default	Disables the checkbox
`isRequired`	`true` `false` default	Marks as required
`isIndeterminate`	`true` `false` default	Shows indeterminate state
`isReadOnly`	`true` `false` default	Prevents toggling
`isInvalid`	`true` `false` default	Shows error styling
`validationBehavior`	`aria` default `native`	Validation strategy
`errorMessage`	`string`	Error text when `isInvalid` is true

CheckboxGroup props

Prop	Type	Description
`label`	`string`	Group label
`value`	`string[]`	Controlled selected values
`defaultValue`	`string[]`	Uncontrolled default
`isDisabled`	`true` `false` default	Disables all checkboxes
`isRequired`	`true` `false` default	Marks group as required
`isReadOnly`	`true` `false` default	Prevents any changes
`isInvalid`	`true` `false` default	Shows error styling on the group
`validationBehavior`	`aria` default `native`	Validation strategy
`orientation`	`horizontal` `vertical` default	Layout direction
`name`	`string`	Form field name
`description`	`string`	Helper text
`errorMessage`	`string`	Error text when `isInvalid` is true
`children`	`node[]`	`Checkbox` child nodes

Notes

CheckboxGroup manages keyboard navigation and ARIA group labelling automatically.
isIndeterminate is a visual-only state; it does not affect the submitted form value.