Introduction

Radio groups present a small, fixed list of options where exactly one choice applies — a language, an applicant type, a yes/no consent. If people should be able to pick several, use a Checkbox instead. Built on Radix UI's Radio Group primitive.

Installation

npx shadcn@latest add https://indiacn.in/r/radio-group.json

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

Usage

<RadioGroup defaultValue="english">
<div className="flex items-center gap-3">
  <RadioGroupItem value="hindi" id="lang-hindi" />
  <Label htmlFor="lang-hindi">हिन्दी</Label>
</div>
<div className="flex items-center gap-3">
  <RadioGroupItem value="english" id="lang-english" />
  <Label htmlFor="lang-english">English</Label>
</div>
</RadioGroup>

Examples

Default

हिन्दी

English

தமிழ்

RadioGroupDefault

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

export default function Component() {
  return (
    <RadioGroup defaultValue='hindi'>
      <div className='flex items-center gap-3'>
        <RadioGroupItem value='hindi' id='lang-hindi' />
        <Label htmlFor='lang-hindi'>हिन्दी</Label>
      </div>
      <div className='flex items-center gap-3'>
        <RadioGroupItem value='english' id='lang-english' />
        <Label htmlFor='lang-english'>English</Label>
      </div>
      <div className='flex items-center gap-3'>
        <RadioGroupItem value='tamil' id='lang-tamil' />
        <Label htmlFor='lang-tamil'>தமிழ்</Label>
      </div>
    </RadioGroup>
  );
}

With a Disabled Option

Applying for myself

Applying on behalf of someone

Applying as an agent (unavailable)

RadioGroupDisabled

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

export default function Component() {
  return (
    <RadioGroup defaultValue='self'>
      <div className='flex items-center gap-3'>
        <RadioGroupItem value='self' id='applicant-self' />
        <Label htmlFor='applicant-self'>Applying for myself</Label>
      </div>
      <div className='flex items-center gap-3'>
        <RadioGroupItem value='other' id='applicant-other' />
        <Label htmlFor='applicant-other'>Applying on behalf of someone</Label>
      </div>
      <div className='flex items-center gap-3'>
        <RadioGroupItem value='agent' id='applicant-agent' disabled />
        <Label htmlFor='applicant-agent'>Applying as an agent (unavailable)</Label>
      </div>
    </RadioGroup>
  );
}

Horizontal

Yes

RadioGroupHorizontal

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

export default function Component() {
  return (
    <RadioGroup defaultValue='yes' className='flex gap-6'>
      <div className='flex items-center gap-3'>
        <RadioGroupItem value='yes' id='consent-yes' />
        <Label htmlFor='consent-yes'>Yes</Label>
      </div>
      <div className='flex items-center gap-3'>
        <RadioGroupItem value='no' id='consent-no' />
        <Label htmlFor='consent-no'>No</Label>
      </div>
    </RadioGroup>
  );
}

Accessibility

Arrow keys move between options and select as they move, which is the expected radio behaviour. Tab enters and leaves the group as a single stop.
Give each item an id and point a Label at it with htmlFor.
Radio groups are for one choice out of a known set. Above roughly seven options, prefer a select.

API Reference

RadioGroup

Prop	Type	Default	Description
`value`	`string`	—	Controlled selected value
`defaultValue`	`string`	—	Initially selected value when uncontrolled
`onValueChange`	`(value: string) => void`	—	Fires when the selection changes
`disabled`	`boolean`	`false`	Disables every item in the group
`name`	`string`	—	Name submitted with the parent form
`required`	`boolean`	`false`	Requires a selection before submit
`orientation`	`'horizontal' \| 'vertical'`	—	Direction for arrow-key navigation
`className`	`string`	—	Extra Tailwind classes

RadioGroupItem

Prop	Type	Default	Description
`value`	`string`	—	Required. Value this item submits when selected
`disabled`	`boolean`	`false`	Prevents interaction and dims to 50%
`id`	`string`	—	Ties the item to its `Label`
`className`	`string`	—	Extra Tailwind classes

Radio Group

On this page