Radio Group
Installation
Add the component with the CLI.
npx shadcn@latest add @intentui/radio
Composed components
When you install this component via the CLI, it automatically loads all composed components, so you don’t need to add them individually.
Manual installation
Install the dependencies, then copy the component source into your project.
npm install react-aria-components cn
Anatomy
import { Description, Label } from "@/components/ui/field"
import { RadioField, RadioGroup, Radio } from "@/components/ui/radio"<RadioGroup name="billing">
<Label>Billing Cycle</Label>
<Description>
Select how often you'd like to be billed
</Description>
<RadioField value="monthly">
<Radio>Monthly</Radio>
<Description>Billed every month</Description>
</RadioField>
<RadioField value="quarterly">
<Radio>Quarterly</Radio>
<Description>Billed every 3 months</Description>
</RadioField>
<RadioField value="yearly">
<Radio>Yearly</Radio>
<Description>
Billed once per year with a discount
</Description>
</RadioField>
</RadioGroup>Examples
Orientation
By default, the radio group is vertically oriented. You can change it to a horizontal orientation by using the orientation prop.
Without label
If you omit the visible label, provide an accessible name with aria-label or aria-labelledby.
Description
Add a description to the radio group by passing the description prop.
Validation
Submit the form without selecting an option to see the validation error.
Controlled
Pass value and update it with onChange to control the selected option.
Uncontrolled
Use defaultValue to set the initial selection of an uncontrolled radio group.
Disabled
When the radio group is disabled, it cannot be interacted with.
Component API
RadioField
RadioField extends the React Aria Components <RadioField> component.
classNamestringRadio
Radio extends the React Aria Components <RadioButton> component.
classNamestringRadioGroup
RadioGroup extends the React Aria Components <RadioGroup> component.
classNamestringSee the React Aria for the full API reference.
