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;
Install the component from your command line.
npm install @radix-ui/react-radio-group
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>
);
Contains all the parts of a radio group.
| Prop | Type | Default |
|---|---|---|
asChild | boolean | false |
defaultValue | string | |
value | string | |
onValueChange | function | |
disabled | boolean | |
name | string | |
required | boolean | |
orientation | enum | undefined |
dir | enum | |
loop | boolean | true |
| Data Attribute | Values |
|---|---|
[data-disabled] | Present when disabled |
An item in the group that can be checked. An input will also render when used within a form to ensure events propagate correctly.
| Prop | Type | Default |
|---|---|---|
asChild | boolean | false |
value | string | |
disabled | boolean | |
required | boolean |
| Data Attribute | Values |
|---|---|
[data-state] | "checked" | "unchecked" |
[data-disabled] | Present when disabled |
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.
| Prop | Type | Default |
|---|---|---|
asChild | boolean | false |
forceMount | boolean |
| Data Attribute | Values |
|---|---|
[data-state] | "checked" | "unchecked" |
[data-disabled] | Present when disabled |
Adheres to the Radio Group WAI-ARIA design pattern and uses roving tabindex to manage focus movement among radio items.
| Key | Description |
|---|---|
| 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. |