RadioGroup
Props
API reference for RadioGroup. For usage examples, see the React tab.
RadioGroup
| Name | Type | Default |
|---|---|---|
| children | ReactNode | — |
The children of the component. A function may be provided to alter the children based on component state. | ||
| description | string | — |
| 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 | — |
| 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", RadioGroupRenderProps> | — |
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:
| ||
| slot | string | null | — |
A slot name for the component. Slots allow the component to receive props from a parent component. An explicit | ||
| 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 | null | — |
The default value (uncontrolled). | ||
| errorMessage | string | ((validation: ValidationResult) => string) | — |
| form | string | — |
The | ||
| 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 | "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 | null | — |
The current value (controlled). | ||
| Name | Type | Default |
|---|---|---|
| className | ClassNameOrFunction<RadioGroupRenderProps> | 'react-aria-RadioGroup' |
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<RadioGroupRenderProps> | — |
The inline style (opens in new tab) for the element. A function may be provided to compute the style based on component state. | ||
Radio
| Name | Type | Default |
|---|---|---|
| value* (required) | string | — |
The value of the radio button, used when submitting an HTML form. See MDN (opens in new tab). | ||
| children | ChildrenOrFunction<RadioFieldRenderProps> | — |
The children of the component. A function may be provided to alter the children based on component state. | ||
| description | string | — |
Additional helper text for the radio option. | ||
| inputRef | Ref<HTMLInputElement | null> | — |
A ref for the HTML input element. | ||
| isDisabled | boolean | — |
Whether the radio button is disabled or not. Shows that a selection exists, but is not available in that circumstance. | ||
| 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-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 |
|---|---|---|
| autoFocus | boolean | — |
Whether the element should receive focus on render. | ||
| dir | string | — |
| hidden | boolean | — |
| inert | boolean | — |
| lang | string | — |
| ref | Ref<HTMLDivElement> | — |
Requires React 19 | ||
| render | DOMRenderFunction<"div", RadioFieldRenderProps> | — |
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:
| ||
| slot | string | null | — |
A slot name for the component. Slots allow the component to receive props from a parent component. An explicit | ||
| 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. | ||
| onClick | ((e: MouseEvent<FocusableElement, MouseEvent>) => void) | — |
Not recommended – use `onPress` instead. | ||
| 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> | — |
| onKeyDown | ((e: KeyboardEvent) => void) | — |
Handler that is called when a key is pressed. | ||
| onKeyUp | ((e: KeyboardEvent) => void) | — |
Handler that is called when a key is released. | ||
| 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> | — |
| onPress | ((e: PressEvent) => void) | — |
Handler that is called when the press is released over the target. | ||
| onPressChange | ((isPressed: boolean) => void) | — |
Handler that is called when the press state changes. | ||
| onPressEnd | ((e: PressEvent) => void) | — |
Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target. | ||
| onPressStart | ((e: PressEvent) => void) | — |
Handler that is called when a press interaction starts. | ||
| onPressUp | ((e: PressEvent) => void) | — |
Handler that is called when a press is released over the target, regardless of whether it started on the target or not. | ||
| 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 |
|---|---|---|
| className | ClassNameOrFunction<RadioFieldRenderProps> | 'react-aria-RadioField' |
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<RadioFieldRenderProps> | — |
The inline style (opens in new tab) for the element. A function may be provided to compute the style based on component state. | ||