## Import

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

## Live Editor

```jsx
<RadioGroup label="Radio Group">
  <Radio value="a">Option A</Radio>
  <Radio value="b">Option B</Radio>
  <Radio value="c">Option C</Radio>
</RadioGroup>
```

## 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.

```jsx
<RadioGroup label="Default Value" defaultValue="c">
  <Radio value="a">Option A</Radio>
  <Radio value="b">Option B</Radio>
  <Radio value="c">Option C</Radio>
</RadioGroup>
```

### Description

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

```jsx
<RadioGroup
  description="No wrong answers here"
  label="How many nuggets would you like?"
>
  <Radio value="5">5 Nuggets</Radio>
  <Radio value="8">8 Nuggets</Radio>
  <Radio value="24">24 Nuggets</Radio>
</RadioGroup>
```

### 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 />`.

```jsx
<div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
  {/* Single Radio Disabled */}
  <RadioGroup label="Disabled Radio">
    <Radio value="1">Option 1</Radio>
    <Radio value="2" isDisabled>
      Option 2
    </Radio>
    <Radio value="3">Option 3</Radio>
  </RadioGroup>
  {/* Group Disabled */}
  <RadioGroup label="Disabled Radio Group" isDisabled>
    <Radio value="a">Option A</Radio>
    <Radio value="b">Option B</Radio>
    <Radio value="c">Option C</Radio>
  </RadioGroup>
</div>
```

### 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.

```jsx
<RadioGroup label="Readonly Radio Group" isReadOnly defaultValue="b">
  <Radio value="a">Option A</Radio>
  <Radio value="b">Option B</Radio>
  <Radio value="c">Option C</Radio>
</RadioGroup>
```

### 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.

```jsx
function Example() {
  let [selected, setSelected] = React.useState(null);

  return (
    <>
      <RadioGroup label="Favorite food" value={selected} onChange={setSelected}>
        <Radio value="Chicken Sandwich">Chicken Sandwich</Radio>
        <Radio value="Chicken Nuggets">Chicken Nuggets</Radio>
      </RadioGroup>
      <br />
      <p>You have selected: {selected ?? ""}</p>
    </>
  );
}
```

### Success

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

```jsx
<RadioGroup label="Success Radio Group" defaultValue="b">
  <Radio value="a">Option A</Radio>
  <Radio value="b" isSuccess>
    Option B
  </Radio>
  <Radio value="c">Option C</Radio>
</RadioGroup>
```

### Invalid

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

```jsx
<RadioGroup
  label="Error Radio Group"
  isInvalid
  errorMessage="This is an error message"
  defaultValue="b"
>
  <Radio value="a">Option A</Radio>
  <Radio value="b">Option B</Radio>
  <Radio value="c">Option C</Radio>
</RadioGroup>
```

### 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.

```jsx
<RadioGroup label="Favorite pet" name="pet">
  <Radio value="dogs">Dogs</Radio>
  <Radio value="cats">Cats</Radio>
</RadioGroup>
```

## Props

### Radio

| Name | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| value\* | `string` | - | The value of the radio button, used when submitting an HTML form.&#xA;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.&#xA;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\`&#xA;provided for compatibility with other libraries. \`onPress\` provides &#xA;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&#xA;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&#xA;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.&#xA;This allows rendering existing components with built-in styles and behaviors&#xA;such as router links, animation libraries, and pre-styled components.&#xA;&#xA;Requirements:&#xA;&#xA;\* You must render the expected element type (e.g. if \`\<button>\` is expected, you cannot render an \`\<a>\`).&#xA;\* Only a single root DOM element can be rendered (no fragments).&#xA;\* 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.&#xA;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.&#xA;The value of this attribute must be the id of a \`\<form>\` in the same document.&#xA;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.&#xA;This allows rendering existing components with built-in styles and behaviors&#xA;such as router links, animation libraries, and pre-styled components.&#xA;&#xA;Requirements:&#xA;&#xA;\* You must render the expected element type (e.g. if \`\<button>\` is expected, you cannot render an \`\<a>\`).&#xA;\* Only a single root DOM element can be rendered (no fragments).&#xA;\* 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.&#xA;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.&#xA;Validation errors are displayed to the user when the form is submitted&#xA;if \`validationBehavior="native"\`. For realtime validation, use the \`isInvalid\`&#xA;prop instead. |
| validationBehavior | `"native" \ | "aria"` | `'native'` | Whether to use native HTML form validation to prevent form submission&#xA;when the value is missing or invalid, or mark the field as required&#xA;or invalid via ARIA. |
| value | `string` | - | The current value (controlled). |