A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.
Full keyboard navigation.
Supports horizontal/vertical orientation.
Can be controlled or uncontrolled.
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. |