> ## Documentation Index
> Fetch the complete documentation index at: https://araf.badr.co.id/llms.txt
> Use this file to discover all available pages before exploring further.
# Radio Group
> A set of mutually exclusive options where exactly one can be selected at a time — supports vertical, horizontal, and described layouts.
## Overview
Administrator
Editor
Viewer
Enterprise (disabled)
Monthly
Yearly
**Radio Group** is used when users must choose exactly one option from a list. Selecting one radio deselects all others. Unlike a Select, all options are visible simultaneously.
***
## Installation
```bash npm theme={null}
npm install @araf-ds/core
```
```bash yarn theme={null}
yarn add @araf-ds/core
```
```bash pnpm theme={null}
pnpm add @araf-ds/core
```
***
## Usage
```tsx theme={null}
import { RadioGroup, RadioGroupItem } from "@araf-ds/core"
export default function Example() {
return (
)
}
```
***
## Variants
### Vertical (Default)
Select role
Administrator
Editor
Viewer
```tsx theme={null}
```
### Horizontal
Monthly
Yearly
```tsx theme={null}
```
### With Descriptions
All notifications
Receive all emails and push notifications
Important only
Only critical alerts and mentions
None
No notifications
```tsx theme={null}
```
***
## API Reference
### RadioGroup
Controlled selected value.
Callback fired when the selected value changes.
Uncontrolled default selected value.
Layout direction. Values: `vertical` · `horizontal`
Group label displayed above all options.
Disables all items in the group.
### RadioGroupItem
The option value (required).
Option label text.
Supporting description shown below the label.
Disables this specific option.
***
## Accessibility
* Radio Group uses `role="radiogroup"` with individual `role="radio"` elements
* Arrow keys move between options within the group
* Only one item is in the tab order at a time (roving tabindex pattern)
* Disabled items use `aria-disabled="true"` and are skipped by keyboard navigation
* Group label is associated via `aria-labelledby`
* `description` is linked via `aria-describedby`
***
## Do's & Don'ts
* Use Radio Group for mutually exclusive choices (2–6 options)
* Always include a group label to describe what is being chosen
* Use horizontal layout for binary choices (Monthly/Yearly)
* Add descriptions to clarify the implications of each option
* Don't use Radio Group for more than 6 options — use Select instead
* Don't use Radio Group for multi-select — use Checkbox Group instead
* Don't pre-select an option unless there is a clear default
* Don't disable all options simultaneously — show an empty state instead