Checkbox Group

Installation


pnpm dlx @olyx/cli@latest add checkbox-group

Usage

import { CheckBox } from "@/components/ui/checkbox"
import { CheckboxGroup } from "@/components/ui/checkbox-group"
import { Field, FieldLabel } from "@/components/ui/field"

<CheckboxGroup>
  <Field>
    <CheckBox defaultChecked />
    <FieldLabel>Next.js</FieldLabel>
  </Field>
  <Field>
    <CheckBox />
    <FieldLabel>Vite</FieldLabel>
  </Field>
  <Field>
    <CheckBox />
    <FieldLabel>Astro</FieldLabel>
  </Field>
</CheckboxGroup>

API Reference

CheckboxGroup

Styled wrapper for CheckboxGroup.Root from Base UI. Provides shared state management for a group of checkboxes.

Prop	Type	Default
`value`	`string[]`	`undefined`
`defaultValue`	`string[]`	`undefined`
`onValueChange`	`(value: string[]) => void`	`undefined`
`disabled`	`boolean`	`false`
`allValues`	`string[]`	`undefined`
`preserveChildStates`	`boolean`	`false`

Parent Checkbox: To use a parent checkbox that controls all children, add the allValues prop to CheckboxGroup with an array of all child values, and add the parent prop to the parent CheckBox.

For complete props documentation, see Base UI CheckboxGroup.

Examples

For accessible group labelling and validation, prefer wrapping checkbox groups with Field and Fieldset. See the related example: Checkbox group field.