@neynar/ui/llm-docs/radio-group.llm.md

React UI component library built on shadcn/ui and Tailwind CSS

# RadioGroup

**Type**: component

A radio group component for single selection from multiple options RadioGroup allows users to select exactly one option from a set of mutually exclusive choices. Built on Radix UI RadioGroup primitives with enhanced accessibility and keyboard navigation. Each radio group should contain RadioGroupItem components paired with Labels for proper accessibility. The component follows the WAI-ARIA Radio Group design pattern and uses roving tabindex to manage focus movement among radio items. It provides comprehensive keyboard navigation with arrow keys and supports both controlled and uncontrolled usage patterns.

## JSX Usage

```jsx
import { RadioGroup } from '@neynar/ui';

<RadioGroup
  defaultValue="value"
  value="value"
  onValueChange={handleValueChange}
  disabled={true}
  name="value"
  required={true}
  orientation={value}
  dir={value}
  loop={true}
  asChild={true}
/>
```

## Component Props

### defaultValue
- **Type**: `string`
- **Required**: No
- **Description**: The value of the radio item that should be checked when initially rendered. Use when you do not need to control the checked state

### value
- **Type**: `string`
- **Required**: No
- **Description**: The controlled value of the radio item to check. Should be used in conjunction with onValueChange

### onValueChange
- **Type**: `(value: string) => void`
- **Required**: No
- **Description**: Event handler called when the value changes

### disabled
- **Type**: `boolean`
- **Required**: No
- **Description**: When true, prevents the user from interacting with the radio group

### name
- **Type**: `string`
- **Required**: No
- **Description**: The name of the group. Submitted with its owning form as part of a name/value pair

### required
- **Type**: `boolean`
- **Required**: No
- **Description**: When true, indicates that the user must check a radio item before the owning form can be submitted

### orientation
- **Type**: `"horizontal" | "vertical"`
- **Required**: No
- **Description**: The orientation of the component, which determines how focus moves

### dir
- **Type**: `"ltr" | "rtl"`
- **Required**: No
- **Description**: The reading direction of the radio group. If omitted, assumes LTR reading mode

### loop
- **Type**: `boolean`
- **Required**: No
- **Description**: When true, keyboard navigation will loop from last item to first, and vice versa

### asChild
- **Type**: `boolean`
- **Required**: No
- **Description**: Change the default rendered element for the one passed as a child