Radio
A component for displaying radios.
Selected Value: option1
Usage Examples
Basic Usage
A simple usage of RadioGroup with RadioGroupItem components.
<RadioGroup value={selectedValue} onValueChange={setSelectedValue}>
<RadioGroupItem value="option1" id="option1" />
<RadioGroupItem value="option2" id="option2" />
<RadioGroupItem value="option3" id="option3" />
</RadioGroup>With Labels
Add labels to each radio button for accessibility and better UX.
<RadioGroup value={selectedValue} onValueChange={setSelectedValue}>
<div className="flex gap-4">
<RadioGroupItem value="option1" id="option1" />
<label htmlFor="option1" className="mt-1">Option 1</label>
<RadioGroupItem value="option2" id="option2" />
<label htmlFor="option2" className="mt-1">Option 2</label>
<RadioGroupItem value="option3" id="option3" />
<label htmlFor="option3" className="mt-1">Option 3</label>
</div>
</RadioGroup>Disabled Group
Make the entire RadioGroup (and its items) disabled by using the `disabled` prop.
<RadioGroup value={selectedValue} onValueChange={setSelectedValue} disabled>
<RadioGroupItem value="option1" id="option1" />
<RadioGroupItem value="option2" id="option2" />
<RadioGroupItem value="option3" id="option3" />
</RadioGroup>Props
Name
Type
Default
Description
value
string | null
-
The current value of the selected radio item. It controls the selected radio button.
onValueChange
(value: string) => void
-
Callback function to handle the change of selected value.
className
string
-
Optional className to apply custom styles to the RadioGroup wrapper.
disabled
boolean
-
Whether the RadioGroup should be disabled. All RadioItems within will also be disabled.