> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/radix-ui/primitives/llms.txt
> Use this file to discover all available pages before exploring further.
# Radio Group
> A set of checkable buttons where no more than one can be checked at a time.
## Overview
Radio Group provides a set of radio buttons where only one option can be selected at a time. It handles keyboard navigation, focus management, and proper ARIA attributes automatically.
## Features
* Full keyboard navigation
* Supports horizontal/vertical orientation
* Can be controlled or uncontrolled
* Works inside forms
* Roving focus management
* Accessible by default with proper ARIA attributes
## Installation
```bash theme={null}
npm install @radix-ui/react-radio-group
```
## Anatomy
```jsx theme={null}
import * as RadioGroup from '@radix-ui/react-radio-group';
export default () => (
);
```
## API Reference
### Root
Contains all the radio group component parts.
The controlled value of the radio item to check.
The value of the radio item that should be checked when initially rendered (uncontrolled).
Event handler called when the value changes.
When true, prevents the user from interacting with radio items.
The name of the group. Submitted with its owning form as part of a name/value pair.
When true, indicates that the user must check a radio item before the form can be submitted.
The orientation of the component. Mainly affects keyboard navigation.
The reading direction of the radio group. If omitted, inherits from the parent.
When true, keyboard navigation will loop from last item to first, and vice versa.
Change the default rendered element for the one passed as a child.
### Item
An item in the group that can be checked. An `input` will also render when used within a `form` to ensure events propagate correctly.
The unique value of the item.
When true, prevents the user from interacting with the radio item.
When true, indicates that the user must check the radio item before the form can be submitted.
Change the default rendered element for the one passed as a child.
### Indicator
Renders when the radio item is in a checked state. You can style this element directly, or you can use it as a wrapper to put an icon into, or both.
Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.
Change the default rendered element for the one passed as a child.
## Example
```jsx Basic theme={null}
import * as RadioGroup from '@radix-ui/react-radio-group';
import './styles.css';
export default () => (
);
```
```jsx Controlled theme={null}
import { useState } from 'react';
import * as RadioGroup from '@radix-ui/react-radio-group';
export default () => {
const [value, setValue] = useState('apple');
return (
);
};
```
```jsx Horizontal theme={null}
import * as RadioGroup from '@radix-ui/react-radio-group';
export default () => (
);
```
## Accessibility
Adheres to the [Radio Group WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/radio/) and uses [roving tabindex](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex) to manage focus movement among radio items.
### Keyboard Interactions
* **Tab** - Moves focus to either the checked radio item or the first radio item in the group.
* **Space** - When focus is on an unchecked radio item, checks it.
* **ArrowDown** - Moves focus to the next radio item in the group.
* **ArrowRight** - Moves focus to the next radio item in the group.
* **ArrowUp** - Moves focus to the previous radio item in the group.
* **ArrowLeft** - Moves focus to the previous radio item in the group.
### Data Attributes
**Root**
* `[data-disabled]` - Present when disabled
**Item**
* `[data-state]` - "checked" or "unchecked"
* `[data-disabled]` - Present when disabled
**Indicator**
* `[data-state]` - "checked" or "unchecked"
* `[data-disabled]` - Present when disabled