Checkbox Group

View source Report an issue

CheckboxGroup is a combination of checkbox input controls that enables the user to select or deselect values in a group.

Can be used controlled or uncontrolled.

CheckboxGroup provides two types of Item, one being the regular Checkbox Item, as well as, the AllItem which keeps track of all the other checkboxes on its own or further nested levels. Checking the AllItem will check/uncheck all related checkboxes.

(!) Note that Items need to be mounted to affect the AllItem state and be targetted by it. If filtered out or collapsed without them being in the DOM they do not count. This is by design!

Examples

<CheckboxGroup>
  <CheckboxGroup.AllItem title="Check all" />
  <CheckboxGroup.Item value={1} />
  <CheckboxGroup.Item value={2} />
  <CheckboxGroup.Item value={3} />
  <CheckboxGroup.Sub>
    <CheckboxGroup.AllItem title="Check all nested" defaultChecked={true} />
    <CheckboxGroup.Item value='1 but nested' defaultChecked={true} />
    <CheckboxGroup.Item value='2 but nested' />
  </CheckboxGroup.Sub>
</CheckboxGroup>

API Reference

CheckboxGroup

Prop	Type	Default	Required
`asChild`	`boolean`		-
`checked`	`(string \| number \| readonly string[] \| undefined)[]`	-	-
`defaultChecked`	`(string \| number \| readonly string[] \| undefined)[]`	-	-
`onCheckedChange`	`(checked: (string \| number \| readonly string[] \| undefined)[]) => void`	-	-

CheckboxGroup.Sub

Prop	Type	Default	Required
`asChild`	`boolean`		-

CheckboxGroup.AllItem

Prop	Type	Default	Required
`as`	`JSX.IntrinsicElements`	-	-
`asChild`	`boolean`	-	-
`onCheckedChange`	`(checked: CheckedState) => void`	-	-
`required`	`boolean`	-	-
`size`	`"md"` \| `"lg"`	-	-
`state`	`"error"`	-	-

CheckboxGroup.Item

Prop	Type	Default	Required
`as`	`JSX.IntrinsicElements`	-	-
`asChild`	`boolean`	-	-
`onCheckedChange`	`(newChecked: boolean) => void`	-	-
`required`	`boolean`	-	-
`size`	`"md"` \| `"lg"`	-	-
`state`	`"error"`	-	-