Radio Group

Ready

Single selection radio button groups for mutually exclusive choices

Basic Radio Group

Simple radio button group

Controlled Radio Group

Manage radio group state in your component

Selected plan: pro

Radio Group with Descriptions

Add context with descriptions

Receive notifications via email

Get text messages for important updates

Receive push notifications on your devices

Don't send me any notifications

Card-style Selection

Radio groups with card layouts

Perfect for individuals • $9/month

For growing teams • $29/month

For large organizations • Custom pricing

Disabled State

Radio groups and individual items can be disabled

Disabled Group

Disabled Individual Items

Installation

Install the required dependencies

npm install @radix-ui/react-radio-group

Usage

Basic implementation example

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

export default function Example() {
  return (
    <RadioGroup defaultValue="option1">
      <div className="flex items-center space-x-2">
        <RadioGroupItem value="option1" id="option1" />
        <Label htmlFor="option1">Option 1</Label>
      </div>
      <div className="flex items-center space-x-2">
        <RadioGroupItem value="option2" id="option2" />
        <Label htmlFor="option2">Option 2</Label>
      </div>
    </RadioGroup>
  )
}

Props

RadioGroup component props

PropTypeDefaultDescription
valuestring-Controlled value
defaultValuestring-Default value (uncontrolled)
onValueChange(value: string) => void-Callback when value changes
disabledbooleanfalseDisable the entire group
requiredbooleanfalseMark as required in forms

Features

Built-in functionality

  • Keyboard navigation - Arrow keys to move between options
  • Single selection - Only one option can be selected
  • Controlled & uncontrolled - Flexible state management
  • Accessible - ARIA roles and keyboard support
  • Smooth transitions - 200ms color transitions
  • Full border radius - Circular radio buttons