CheckboxGroup

Props

API reference for CheckboxGroup. For usage examples, see the React tab.

Name	Type	Default
children	`ReactNode`
The children checkboxes of the checkbox group.
description	`string`
The helper text for the checkbox group.
isDisabled	`boolean`
Whether the input is disabled.
isInvalid	`boolean`
Whether the input value is invalid.
isReadOnly	`boolean`
Whether the input can be selected but not changed by the user.
isRequired	`boolean`
Whether user input is required on the input before form submission.
label	`string`
The label of the checkbox group.

Name	Type	Default
aria-describedby	`string`
Identifies the element (or elements) that describes the object.
aria-details	`string`
Identifies the element (or elements) that provide a detailed, extended description for the object.
aria-errormessage	`string`
Identifies the element that provides an error message for the object.
aria-label	`string`
Defines a string value that labels the current element.
aria-labelledby	`string`
Identifies the element (or elements) that labels the current element.
id	`string`
The element's unique identifier. See MDN (opens in new tab).

Name	Type	Default
dir	`string`
hidden	`boolean`
inert	`boolean`
lang	`string`
ref	`Ref<HTMLDivElement>`
Requires React 19
render	`DOMRenderFunction<"div", CheckboxGroupRenderProps>`
Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components. Requirements: You must render the expected element type (e.g. if `<button>` is expected, you cannot render an `<a>`). Only a single root DOM element can be rendered (no fragments). You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
slot	`string \| null`
A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent.
suppressHydrationWarning	`boolean`
A React-only flag that suppresses the warning React normally logs when an element's server-rendered content doesn't match the client render during hydration. See React docs (opens in new tab).
translate	`"no" \| "yes"`

Name	Type	Default
onAnimationEnd	`AnimationEventHandler<HTMLDivElement>`
onAnimationEndCapture	`AnimationEventHandler<HTMLDivElement>`
onAnimationIteration	`AnimationEventHandler<HTMLDivElement>`
onAnimationIterationCapture	`AnimationEventHandler<HTMLDivElement>`
onAnimationStart	`AnimationEventHandler<HTMLDivElement>`
onAnimationStartCapture	`AnimationEventHandler<HTMLDivElement>`
onAuxClick	`MouseEventHandler<HTMLDivElement>`
onAuxClickCapture	`MouseEventHandler<HTMLDivElement>`
onBlur	`((e: FocusEvent<Element, Element>) => void)`
Handler that is called when the element loses focus.
onChange	`((value: string[]) => void)`
Handler that is called when the value changes.
onClick	`MouseEventHandler<HTMLDivElement>`
onClickCapture	`MouseEventHandler<HTMLDivElement>`
onContextMenu	`MouseEventHandler<HTMLDivElement>`
onContextMenuCapture	`MouseEventHandler<HTMLDivElement>`
onDoubleClick	`MouseEventHandler<HTMLDivElement>`
onDoubleClickCapture	`MouseEventHandler<HTMLDivElement>`
onFocus	`((e: FocusEvent<Element, Element>) => void)`
Handler that is called when the element receives focus.
onFocusChange	`((isFocused: boolean) => void)`
Handler that is called when the element's focus status changes.
onGotPointerCapture	`PointerEventHandler<HTMLDivElement>`
onGotPointerCaptureCapture	`PointerEventHandler<HTMLDivElement>`
onLostPointerCapture	`PointerEventHandler<HTMLDivElement>`
onLostPointerCaptureCapture	`PointerEventHandler<HTMLDivElement>`
onMouseDown	`MouseEventHandler<HTMLDivElement>`
onMouseDownCapture	`MouseEventHandler<HTMLDivElement>`
onMouseEnter	`MouseEventHandler<HTMLDivElement>`
onMouseLeave	`MouseEventHandler<HTMLDivElement>`
onMouseMove	`MouseEventHandler<HTMLDivElement>`
onMouseMoveCapture	`MouseEventHandler<HTMLDivElement>`
onMouseOut	`MouseEventHandler<HTMLDivElement>`
onMouseOutCapture	`MouseEventHandler<HTMLDivElement>`
onMouseOver	`MouseEventHandler<HTMLDivElement>`
onMouseOverCapture	`MouseEventHandler<HTMLDivElement>`
onMouseUp	`MouseEventHandler<HTMLDivElement>`
onMouseUpCapture	`MouseEventHandler<HTMLDivElement>`
onPointerCancel	`PointerEventHandler<HTMLDivElement>`
onPointerCancelCapture	`PointerEventHandler<HTMLDivElement>`
onPointerDown	`PointerEventHandler<HTMLDivElement>`
onPointerDownCapture	`PointerEventHandler<HTMLDivElement>`
onPointerEnter	`PointerEventHandler<HTMLDivElement>`
onPointerLeave	`PointerEventHandler<HTMLDivElement>`
onPointerMove	`PointerEventHandler<HTMLDivElement>`
onPointerMoveCapture	`PointerEventHandler<HTMLDivElement>`
onPointerOut	`PointerEventHandler<HTMLDivElement>`
onPointerOutCapture	`PointerEventHandler<HTMLDivElement>`
onPointerOver	`PointerEventHandler<HTMLDivElement>`
onPointerOverCapture	`PointerEventHandler<HTMLDivElement>`
onPointerUp	`PointerEventHandler<HTMLDivElement>`
onPointerUpCapture	`PointerEventHandler<HTMLDivElement>`
onScroll	`UIEventHandler<HTMLDivElement>`
onScrollCapture	`UIEventHandler<HTMLDivElement>`
onTouchCancel	`TouchEventHandler<HTMLDivElement>`
onTouchCancelCapture	`TouchEventHandler<HTMLDivElement>`
onTouchEnd	`TouchEventHandler<HTMLDivElement>`
onTouchEndCapture	`TouchEventHandler<HTMLDivElement>`
onTouchMove	`TouchEventHandler<HTMLDivElement>`
onTouchMoveCapture	`TouchEventHandler<HTMLDivElement>`
onTouchStart	`TouchEventHandler<HTMLDivElement>`
onTouchStartCapture	`TouchEventHandler<HTMLDivElement>`
onTransitionCancel	`TransitionEventHandler<HTMLDivElement>`
onTransitionCancelCapture	`TransitionEventHandler<HTMLDivElement>`
onTransitionEnd	`TransitionEventHandler<HTMLDivElement>`
onTransitionEndCapture	`TransitionEventHandler<HTMLDivElement>`
onTransitionRun	`TransitionEventHandler<HTMLDivElement>`
onTransitionRunCapture	`TransitionEventHandler<HTMLDivElement>`
onTransitionStart	`TransitionEventHandler<HTMLDivElement>`
onTransitionStartCapture	`TransitionEventHandler<HTMLDivElement>`
onWheel	`WheelEventHandler<HTMLDivElement>`
onWheelCapture	`WheelEventHandler<HTMLDivElement>`

Name	Type	Default
defaultValue	`string[]`
The default value (uncontrolled).
errorMessage	`string \| ((validation: ValidationResult) => string)`
Error message displays when the checkbox group is invalid.
form	`string`
The `<form>` element to associate the input with. The value of this attribute must be the id of a `<form>` in the same document. See MDN (opens in new tab).
name	`string`
The name of the input element, used when submitting an HTML form. See MDN (opens in new tab).
validate	`((value: string[]) => true \| ValidationError \| null)`
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	`"aria" \| "native"`	`'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.
value	`string[]`
The current value (controlled).

Name	Type	Default
className	`ClassNameOrFunction<CheckboxGroupRenderProps>`	`'react-aria-CheckboxGroup'`
The CSS className (opens in new tab) for the element. A function may be provided to compute the class based on component state.
style	`StyleOrFunction<CheckboxGroupRenderProps>`
The inline style (opens in new tab) for the element. A function may be provided to compute the style based on component state.

CheckboxGroup

Props

Accessibility (6)(6 props)

Advanced (9)(9 props)

Events (68)(68 props)

Forms (7)(7 props)

Styling (2)(2 props)