<CheckboxGroup defaultValue={["design"]}>
<Checkbox name="design" id="skills-design" />
<Label htmlFor="skills-design">Design</Label>
</CheckboxGroup>The group's value is the array of ticked names. In parent mode (parent plus
allValues) Base UI rewrites the boxes' ids for its aria-controls wiring, so
labels have to wrap their checkbox there rather than point at it with
htmlFor.
API
| Prop | Type | Default | |
|---|---|---|---|
orientation | "horizontal" | "vertical" | "vertical" | Layout direction of the items. vertical stacks them (the default);
horizontal lays them out in a wrapping row - saves consumers from
rebuilding a flex-row wrapper for short option sets. (Same API as
RadioGroup.) |
allValues | string[] | — | Names of all checkboxes in the group. Use this when creating a parent checkbox. |
className | string | ((state: CheckboxGroupState) => string | undefined) | — | CSS class applied to the element, or a function that returns a class based on the component's state. |
defaultValue | string[] | — | Names of the checkboxes in the group that should be initially ticked. To render a controlled checkbox group, use the value prop instead. |
disabled | boolean | — | Whether the component should ignore user interaction. |
onValueChange | ((value: string[], eventDetails: { reason: "none"; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element | undefined; }) => void) | — | Event handler called when a checkbox in the group is ticked or unticked. Provides the new value as an argument. |
render | ComponentRenderFn<HTMLProps, CheckboxGroupState> | ReactElement<unknown, string | JSXElementConstructor<any>> | — | Allows you to replace the component's HTML element
with a different tag, or compose it with another component. Accepts a ReactElement or a function that returns the element to render. |
style | CSSProperties | ((state: CheckboxGroupState) => CSSProperties | undefined) | — | Style applied to the element, or a function that returns a style object based on the component's state. |
value | string[] | — | Names of the checkboxes in the group that should be ticked. To render an uncontrolled checkbox group, use the defaultValue prop instead. |
Plus the DOM props of the element it renders. Source: checkbox-group/components/checkbox-group.tsx.