RadioGroup

A group of radio buttons for selecting exactly one option from a set. Built on Radix UI RadioGroup — handles roving focus, keyboard navigation, and ARIA automatically.

Built on Radix UI.

✓Single selection — selecting one item deselects others
✓Roving focus — Arrow keys navigate between items
✓Controlled and uncontrolled usage
✓Disabled individual items or the entire group
✓Works with Label via htmlFor/id

Default

Comfortable

Compact

import { RadioGroup }from "@aetherstack/ui"

radiogroup.tsx

import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Label } from "@/components/ui/label"

export function RadioGroupDemo() {
  return (
    <RadioGroup defaultValue="comfortable">
      <div className="flex items-center space-x-2">
        <RadioGroupItem value="default" id="r1" />
        <Label htmlFor="r1">Default</Label>
      </div>
      <div className="flex items-center space-x-2">
        <RadioGroupItem value="comfortable" id="r2" />
        <Label htmlFor="r2">Comfortable</Label>
      </div>
      <div className="flex items-center space-x-2">
        <RadioGroupItem value="compact" id="r3" />
        <Label htmlFor="r3">Compact</Label>
      </div>
    </RadioGroup>
  )
}

Usage

Controlled

Use value and onValueChange for controlled usage.

Default

Comfortable

Compact

Horizontal layout

Plan

Starter

Pro

Enterprise

Card-style options

Wrap each item in a Card for a richer selection UI.

Monthly

Yearly

save 20%

Props

Prop	Type	Default	Description

RadioGroup

Prop	Type	Default	Description
value	string	—	Controlled selected value.
defaultValue	string	—	Uncontrolled initial selected value.
onValueChange	(value: string) => void	—	Callback when the selected value changes.
disabled	boolean	false	Disables all items in the group.
required	boolean	false	Required in form context.
orientation	"horizontal" \| "vertical"	"vertical"	Affects arrow key navigation direction.
className	string	—	Defaults to grid gap-2.

RadioGroupItem

Prop	Type	Default	Description
value*	string	—	The value of this radio button.
disabled	boolean	false	Disables this individual item.
className	string	—	Additional classes on the radio button.

* Required props

Accessibility

→Arrow keys navigate between items within the group — Tab moves focus to/from the group, not between items.
→Always wrap in a <fieldset> with a <legend> for form accessibility.
→Each RadioGroupItem must have an associated Label.
→Screen readers announce the group name (from legend) and each option's label.