Use CheckboxGroup to allow users to select multiple items from a list of individual items, or to mark one individual item as selected.
import { Checkbox } from "@/components/core/checkbox";import { CheckboxGroup } from "@/components/core/checkbox-group";<CheckboxGroup label="React frameworks" defaultValue={["nextjs"]}> <Checkbox value="nextjs">Next.js</Checkbox> <Checkbox value="remix">Remix</Checkbox> <Checkbox value="gatsby">Gatsby</Checkbox></CheckboxGroup>;
import { Checkbox } from "@/components/core/checkbox";import { CheckboxGroup } from "@/components/core/checkbox-group";import { Label } from "@/components/core/field";<CheckboxGroupRoot defaultValue={["nextjs"]}> <Label>React frameworks</Label> <Checkbox value="nextjs">Next.js</Checkbox> <Checkbox value="remix">Remix</Checkbox> <Checkbox value="gatsby">Gatsby</Checkbox></CheckboxGroupRoot>;
Best practices
If users are only allowed to select a single option, consider using a radio group instead.
Each checkbox's state should be independent from other checkboxes in the group. For example: checking one checkbox should not check or disable any other checkboxes.
Options
Variant
Use the variant prop to control the visual style of the CheckBoxGroup.
A description can be supplied to a CheckboxGroup via the description prop. The description is always visible unless the isInvalid prop is true and an error message is provided.
React frameworksYou can pick any frameworks.
description.tsx
<CheckboxGroup label="React frameworks" defaultValue={["nextjs"]} description="You can pick any frameworks."> <Checkbox value="nextjs">Next.js</Checkbox> <Checkbox value="remix">Remix</Checkbox> <Checkbox value="gatsby">Gatsby</Checkbox></CheckboxGroup>
Error message
An error message can be supplied to a CheckboxGroup, which will be displayed when the isInvalid prop is set to true.
The isReadOnly boolean prop makes the CheckboxGroup's text content immutable. Unlike isDisabled, the CheckboxGroup remains focusable and the contents can still be copied.
A function that returns an error message if a given value is invalid. Validation errors are displayed to the user when the form is submitted if validationBehavior="native". For realtime validation, use the isInvalid prop instead.
validationBehavior
'native' | 'aria'
'native'
Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.