RadioGroup

Copy for LLM

A RadioGroup is a set of related options where only one can be selected at a time. A Radio button must be a child of a RadioGroup.

Import

import { Radio, RadioGroup } from "@cfa/react-core";

Live Editor

Examples

Default Value

The defaultValue prop can be used to set the default selected value of the radio group. This is useful when you want to pre-select a specific option.

Description

The description prop can be used to provide additional context for the radio group.

Disabled State

To disable the entire group, pass the isDisabled prop to the parent <RadioGroup />. You can also disable an individual <Radio /> by passing the isDisabled prop to the child <Radio />.

Readonly

To set the radio group to read-only, pass the isReadOnly prop to the parent <RadioGroup />. Use this when you want to prevent the user from changing the selection but still want to display the selected value and be available to screen readers.

Controlled

The value prop can be used to control the selected value of the <RadioGroup />. This is useful when you want to manage the selected value externally.

Success

To indicate success, pass the isSuccess prop to an individual <Radio />.

Invalid

To indicate an error, pass the isInvalid prop to the parent <RadioGroup />. You can also pass the errorMessage prop to provide additional context.

Native HTML Forms

The <RadioGroup /> component can be used in a native HTML form. The name prop is required for the <RadioGroup /> to work properly in a form.

Props

Visit the Documentation Site for the full list of props.

Radio

Name	Type	Default	Description
value	`string`	-	The value of the radio button, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#Value).
isSuccess	`boolean`	-	-
ref	`Ref<HTMLLabelElement>`	-	Requires React 19
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.
autoFocus	`boolean`	-	Whether the element should receive focus on render.
children	`ChildrenOrFunction<RadioRenderProps>`	-	The children of the component. A function may be provided to alter the children based on component state.
className	`ClassNameOrFunction<RadioRenderProps>`	`'react-aria-Radio'`	The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.
dir	`string`	-	-
hidden	`boolean`	-	-
id	`string`	-	The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
inert	`boolean`	-	-
inputRef	`RefObject<HTMLInputElement>`	-	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.
lang	`string`	-	-
onAnimationEnd	`AnimationEventHandler<HTMLLabelElement>`	-	-
onAnimationEndCapture	`AnimationEventHandler<HTMLLabelElement>`	-	-
onAnimationIteration	`AnimationEventHandler<HTMLLabelElement>`	-	-
onAnimationIterationCapture	`AnimationEventHandler<HTMLLabelElement>`	-	-
onAnimationStart	`AnimationEventHandler<HTMLLabelElement>`	-	-
onAnimationStartCapture	`AnimationEventHandler<HTMLLabelElement>`	-	-
onAuxClick	`MouseEventHandler<HTMLLabelElement>`	-	-
onAuxClickCapture	`MouseEventHandler<HTMLLabelElement>`	-	-
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. `onClick` is an alias for `onPress` provided for compatibility with other libraries. `onPress` provides additional event details for non-mouse interactions.
onClickCapture	`MouseEventHandler<HTMLLabelElement>`	-	-
onContextMenu	`MouseEventHandler<HTMLLabelElement>`	-	-
onContextMenuCapture	`MouseEventHandler<HTMLLabelElement>`	-	-
onDoubleClick	`MouseEventHandler<HTMLLabelElement>`	-	-
onDoubleClickCapture	`MouseEventHandler<HTMLLabelElement>`	-	-
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<HTMLLabelElement>`	-	-
onGotPointerCaptureCapture	`PointerEventHandler<HTMLLabelElement>`	-	-
onHoverChange	`(isHovering: boolean) => void`	-	Handler that is called when the hover state changes.
onHoverEnd	`(e: HoverEvent) => void`	-	Handler that is called when a hover interaction ends.
onHoverStart	`(e: HoverEvent) => void`	-	Handler that is called when a hover interaction starts.
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<HTMLLabelElement>`	-	-
onLostPointerCaptureCapture	`PointerEventHandler<HTMLLabelElement>`	-	-
onMouseDown	`MouseEventHandler<HTMLLabelElement>`	-	-
onMouseDownCapture	`MouseEventHandler<HTMLLabelElement>`	-	-
onMouseEnter	`MouseEventHandler<HTMLLabelElement>`	-	-
onMouseLeave	`MouseEventHandler<HTMLLabelElement>`	-	-
onMouseMove	`MouseEventHandler<HTMLLabelElement>`	-	-
onMouseMoveCapture	`MouseEventHandler<HTMLLabelElement>`	-	-
onMouseOut	`MouseEventHandler<HTMLLabelElement>`	-	-
onMouseOutCapture	`MouseEventHandler<HTMLLabelElement>`	-	-
onMouseOver	`MouseEventHandler<HTMLLabelElement>`	-	-
onMouseOverCapture	`MouseEventHandler<HTMLLabelElement>`	-	-
onMouseUp	`MouseEventHandler<HTMLLabelElement>`	-	-
onMouseUpCapture	`MouseEventHandler<HTMLLabelElement>`	-	-
onPointerCancel	`PointerEventHandler<HTMLLabelElement>`	-	-
onPointerCancelCapture	`PointerEventHandler<HTMLLabelElement>`	-	-
onPointerDown	`PointerEventHandler<HTMLLabelElement>`	-	-
onPointerDownCapture	`PointerEventHandler<HTMLLabelElement>`	-	-
onPointerEnter	`PointerEventHandler<HTMLLabelElement>`	-	-
onPointerLeave	`PointerEventHandler<HTMLLabelElement>`	-	-
onPointerMove	`PointerEventHandler<HTMLLabelElement>`	-	-
onPointerMoveCapture	`PointerEventHandler<HTMLLabelElement>`	-	-
onPointerOut	`PointerEventHandler<HTMLLabelElement>`	-	-
onPointerOutCapture	`PointerEventHandler<HTMLLabelElement>`	-	-
onPointerOver	`PointerEventHandler<HTMLLabelElement>`	-	-
onPointerOverCapture	`PointerEventHandler<HTMLLabelElement>`	-	-
onPointerUp	`PointerEventHandler<HTMLLabelElement>`	-	-
onPointerUpCapture	`PointerEventHandler<HTMLLabelElement>`	-	-
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<HTMLLabelElement>`	-	-
onScrollCapture	`UIEventHandler<HTMLLabelElement>`	-	-
onTouchCancel	`TouchEventHandler<HTMLLabelElement>`	-	-
onTouchCancelCapture	`TouchEventHandler<HTMLLabelElement>`	-	-
onTouchEnd	`TouchEventHandler<HTMLLabelElement>`	-	-
onTouchEndCapture	`TouchEventHandler<HTMLLabelElement>`	-	-
onTouchMove	`TouchEventHandler<HTMLLabelElement>`	-	-
onTouchMoveCapture	`TouchEventHandler<HTMLLabelElement>`	-	-
onTouchStart	`TouchEventHandler<HTMLLabelElement>`	-	-
onTouchStartCapture	`TouchEventHandler<HTMLLabelElement>`	-	-
onTransitionCancel	`TransitionEventHandler<HTMLLabelElement>`	-	-
onTransitionCancelCapture	`TransitionEventHandler<HTMLLabelElement>`	-	-
onTransitionEnd	`TransitionEventHandler<HTMLLabelElement>`	-	-
onTransitionEndCapture	`TransitionEventHandler<HTMLLabelElement>`	-	-
onTransitionRun	`TransitionEventHandler<HTMLLabelElement>`	-	-
onTransitionRunCapture	`TransitionEventHandler<HTMLLabelElement>`	-	-
onTransitionStart	`TransitionEventHandler<HTMLLabelElement>`	-	-
onTransitionStartCapture	`TransitionEventHandler<HTMLLabelElement>`	-	-
onWheel	`WheelEventHandler<HTMLLabelElement>`	-	-
onWheelCapture	`WheelEventHandler<HTMLLabelElement>`	-	-
render	`DOMRenderFunction<"label", RadioRenderProps>`	-	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`	-	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.
style	`StyleOrFunction<RadioRenderProps>`	-	The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.
translate	`"yes" \| "no"`	-	-

RadioGroup

Name	Type	Default	Description
children	`ReactNode`	-	The children of the component. A function may be provided to alter the children based on component state.
description	`string`	-	-
errorMessage	`string \| ((validation: ValidationResult) => string)`	-	-
label	`string`	-	-
ref	`Ref<HTMLDivElement>`	-	Requires React 19
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.
className	`ClassNameOrFunction<RadioGroupRenderProps>`	`'react-aria-RadioGroup'`	The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.
defaultValue	`string`	-	The default value (uncontrolled).
dir	`string`	-	-
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](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form).
hidden	`boolean`	-	-
id	`string`	-	The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
inert	`boolean`	-	-
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.
lang	`string`	-	-
name	`string`	-	The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).
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>`	-	-
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: * 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`	-	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.
style	`StyleOrFunction<RadioGroupRenderProps>`	-	The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.
translate	`"yes" \| "no"`	-	-
validate	`(value: string) => true \| ValidationError`	-	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.
value	`string`	-	The current value (controlled).