Radio

Allows users to select a single option from a group. Often used for mutually exclusive choices in forms.

Basic Plan

Pro Plan

Code

Installation

npx shadcn@latest add radio-group

Basic Example

import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Label } from "@/components/ui/label"

const [value, setValue] = useState("option1")

<RadioGroup value={value} onValueChange={setValue}>
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="option1" id="option1" />
    <Label htmlFor="option1" className="cursor-pointer">Option 1</Label>
  </div>
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="option2" id="option2" />
    <Label htmlFor="option2" className="cursor-pointer">Option 2</Label>
  </div>
</RadioGroup>

Reference

Props

Prop	Type	Default	Description
value	string	—	Selected value (RadioGroup)
onValueChange	function	—	Callback when value changes (RadioGroup)
disabled	boolean	false	Disable radio item (RadioGroupItem)
value	string	—	Radio item value (RadioGroupItem)

States

Monthly

Yearly

Lifetime (disabled)

Usage Guidelines

When to Use

Use radio buttons when users need to select exactly one option from a small, mutually exclusive set of choices. They work well for settings, preferences, and single-selection options.

Radio buttons are ideal when all options are visible and when you want to emphasize that only one choice is possible. For many options or when space is limited, consider a dropdown instead.

Best Practices

Always group related radio buttons together
Provide clear, descriptive labels for each option
Use a default selection when one option is most common
Disable unavailable options rather than hiding them
Keep radio groups to 5-7 options for best usability

Accessibility

Radio buttons are fully keyboard accessible. Users can navigate with arrow keys and select with Space. Always associate labels with radio buttons using htmlFor and id attributes for proper screen reader support.

Use the Label component with cursor-pointer class to make the entire label area clickable. Disabled options are automatically skipped during keyboard navigation.

Rhetoric-ds