Components

Radio Group

A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.

import React from "react";
import * as RadioGroup from "@radix-ui/react-radio-group";
import "./styles.css";
const RadioGroupDemo = () => (
<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>
);
export default RadioGroupDemo;

Features

    Full keyboard navigation.

    Supports horizontal/vertical orientation.

    Can be controlled or uncontrolled.

Installation

Install the component from your command line.

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

Anatomy

Import all parts and piece them together.

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 parts of a radio group.

PropTypeDefault
asChild
boolean
false
defaultValue
string
No default value
value
string
No default value
onValueChange
function
No default value
disabled
boolean
No default value
name
string
No default value
required
boolean
No default value
orientation
enum
undefined
dir
enum
No default value
loop
boolean
true
Data attributeValues
[data-disabled]

Present when disabled

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.

PropTypeDefault
asChild
boolean
false
value
string
No default value
disabled
boolean
No default value
required
boolean
No default value
Data attributeValues
[data-state]"checked" | "unchecked"
[data-disabled]

Present when disabled

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.

PropTypeDefault
asChild
boolean
false
forceMount
boolean
No default value
Data attributeValues
[data-state]"checked" | "unchecked"
[data-disabled]

Present when disabled

Accessibility

Adheres to the Radio Group WAI-ARIA design pattern and uses roving tabindex to manage focus movement among radio items.

Keyboard Interactions

KeyDescription
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 and checks the next radio item in the group.
ArrowRight
Moves focus and checks 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.