Radio Group
A set of checkable buttons where only one can be checked at a time.
Installation
npm i @radix-ui/react-radio-groupUsage
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { Label } from "@/components/ui/label"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
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>
)
}Examples
Disabled
Disabled Group
Disabled Item
Custom Sizes
Small
Default (Medium)
Large
Custom Layout
Horizontal Layout
Props
| Component | Props | Description |
|---|---|---|
| RadioGroup | RadioGroupPrimitive.RadioGroupProps defaultValue?: string value?: string onValueChange?: (value: string) => void disabled?: boolean | The root component for the radio group. |
| RadioGroupItem | RadioGroupPrimitive.RadioGroupItemProps value: string disabled?: boolean required?: boolean id?: string | An individual radio item within the group. |
Accessibility
The Radio Group component adheres to the WAI-ARIA Radio Group Pattern.
| Key | Description |
|---|---|
| Tab | Moves focus to the radio group. |
| Space | When focus is on an unchecked radio item, checks it. |
| Arrow Down/Right | Moves focus to the next radio item in the group. |
| Arrow Up/Left | Moves focus to the previous radio item in the group. |