Skip to main content

​
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

npm install @araf-ds/core

​
Usage

import { RadioGroup, RadioGroupItem } from "@araf-ds/core"

export default function Example() {
  return (
    <RadioGroup defaultValue="editor" label="Select role">
      <RadioGroupItem value="admin" label="Administrator" />
      <RadioGroupItem value="editor" label="Editor" />
      <RadioGroupItem value="viewer" label="Viewer" />
    </RadioGroup>
  )
}

​
Variants

​
Vertical (Default)

Select role
Administrator
Editor
Viewer
<RadioGroup defaultValue="editor" label="Select role">
  <RadioGroupItem value="admin" label="Administrator" />
  <RadioGroupItem value="editor" label="Editor" />
  <RadioGroupItem value="viewer" label="Viewer" />
</RadioGroup>

​
Horizontal

Monthly
Yearly
<RadioGroup orientation="horizontal" defaultValue="monthly">
  <RadioGroupItem value="monthly" label="Monthly" />
  <RadioGroupItem value="yearly" label="Yearly" />
</RadioGroup>

​
With Descriptions

All notifications
Receive all emails and push notifications
Important only
Only critical alerts and mentions
None
No notifications
<RadioGroup label="Notification preference">
  <RadioGroupItem
    value="all"
    label="All notifications"
    description="Receive all emails and push notifications"
  />
  <RadioGroupItem
    value="important"
    label="Important only"
    description="Only critical alerts and mentions"
  />
  <RadioGroupItem value="none" label="None" description="No notifications" />
</RadioGroup>

​
API Reference

​
RadioGroup

​
value
string
Controlled selected value.
​
onValueChange
(value: string) => void
Callback fired when the selected value changes.
​
defaultValue
string
Uncontrolled default selected value.
​
orientation
string
default:"vertical"
Layout direction. Values: vertical · horizontal
​
label
string
Group label displayed above all options.
​
disabled
boolean
default:"false"
Disables all items in the group.

​
RadioGroupItem

​
value
string
The option value (required).
​
label
string
Option label text.
​
description
string
Supporting description shown below the label.
​
disabled
boolean
default:"false"
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

Do

  • 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

  • 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