Skip to main content

​
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

npm install @radix-ui/react-radio-group

​
Anatomy

import * as RadioGroup from '@radix-ui/react-radio-group';

export default () => (
  <RadioGroup.Root>
    <RadioGroup.Item>
      <RadioGroup.Indicator />
    </RadioGroup.Item>
  </RadioGroup.Root>
);

​
API Reference

​
Root

Contains all the radio group component parts.
​
value
string
The controlled value of the radio item to check.
​
defaultValue
string
The value of the radio item that should be checked when initially rendered (uncontrolled).
​
onValueChange
(value: string) => void
Event handler called when the value changes.
​
disabled
boolean
When true, prevents the user from interacting with radio items.
​
name
string
The name of the group. Submitted with its owning form as part of a name/value pair.
​
required
boolean
When true, indicates that the user must check a radio item before the form can be submitted.
​
orientation
'horizontal' | 'vertical'
default:"'vertical'"
The orientation of the component. Mainly affects keyboard navigation.
​
dir
'ltr' | 'rtl'
The reading direction of the radio group. If omitted, inherits from the parent.
​
loop
boolean
default:"true"
When true, keyboard navigation will loop from last item to first, and vice versa.
​
asChild
boolean
default:"false"
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.
​
value
string
required
The unique value of the item.
​
disabled
boolean
When true, prevents the user from interacting with the radio item.
​
required
boolean
When true, indicates that the user must check the radio item before the form can be submitted.
​
asChild
boolean
default:"false"
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.
​
forceMount
boolean
Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.
​
asChild
boolean
default:"false"
Change the default rendered element for the one passed as a child.

​
Example

import * as RadioGroup from '@radix-ui/react-radio-group';
import './styles.css';

export default () => (
  <form>
    <RadioGroup.Root className="RadioGroupRoot" defaultValue="default" aria-label="View density">
      <div style={{ display: 'flex', alignItems: 'center' }}>
        <RadioGroup.Item className="RadioGroupItem" value="default" id="r1">
          <RadioGroup.Indicator className="RadioGroupIndicator" />
        </RadioGroup.Item>
        <label className="Label" htmlFor="r1">
          Default
        </label>
      </div>
      <div style={{ display: 'flex', alignItems: 'center' }}>
        <RadioGroup.Item className="RadioGroupItem" value="comfortable" id="r2">
          <RadioGroup.Indicator className="RadioGroupIndicator" />
        </RadioGroup.Item>
        <label className="Label" htmlFor="r2">
          Comfortable
        </label>
      </div>
      <div style={{ display: 'flex', alignItems: 'center' }}>
        <RadioGroup.Item className="RadioGroupItem" value="compact" id="r3">
          <RadioGroup.Indicator className="RadioGroupIndicator" />
        </RadioGroup.Item>
        <label className="Label" htmlFor="r3">
          Compact
        </label>
      </div>
    </RadioGroup.Root>
  </form>
);

​
Accessibility

Adheres to the Radio Group WAI-ARIA design pattern and uses 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

Build docs developers (and LLMs) love

Get started for freeTalk to us