Radio Group

A set of mutually exclusive radio buttons. Built on Base UI's radio primitive.

Last updated August 7, 2026

CreditsUnchangedPublished

Overview

Default

Comfortable

Compact

import { Label } from "@/components/ui/label"
import {
  RadioGroup,
  RadioGroupItem,
} from "@/components/ui/radio-group"
 
const plans = [
  { value: "default", label: "Default" },
  { value: "comfortable", label: "Comfortable" },
  { value: "compact", label: "Compact" },
]
 
export function RadioGroupDemoExample() {
  return (
    <RadioGroup defaultValue="comfortable">
      {plans.map((plan) => (
        <div key={plan.value} className="flex items-center gap-2">
          <RadioGroupItem value={plan.value} id={`radio-demo-${plan.value}`} />
          <Label htmlFor={`radio-demo-${plan.value}`}>{plan.label}</Label>
        </div>
      ))}
    </RadioGroup>
  )
}

Installation

$ npx shadcn@latest add https://ui.persian-labs.ir/r/radio-group.json

Usage

import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
 
export function Example() {
  return (
    <RadioGroup defaultValue="comfortable">
      <RadioGroupItem value="default" />
      <RadioGroupItem value="comfortable" />
      <RadioGroupItem value="compact" />
    </RadioGroup>
  )
}

Disabled

Default

Compact

import { Label } from "@/components/ui/label"
import {
  RadioGroup,
  RadioGroupItem,
} from "@/components/ui/radio-group"
 
export function RadioGroupDisabledExample() {
  return (
    <RadioGroup defaultValue="default">
      <div className="flex items-center gap-2">
        <RadioGroupItem value="default" id="radio-disabled-default" />
        <Label htmlFor="radio-disabled-default">Default</Label>
      </div>
      <div className="flex items-center gap-2">
        <RadioGroupItem value="compact" id="radio-disabled-compact" disabled />
        <Label htmlFor="radio-disabled-compact">Compact</Label>
      </div>
    </RadioGroup>
  )
}

RTL

پیش‌فرض

راحت

فشرده

import { Label } from "@/components/ui/label"
import {
  RadioGroup,
  RadioGroupItem,
} from "@/components/ui/radio-group"
 
const plans = [
  { value: "default", label: "پیش‌فرض" },
  { value: "comfortable", label: "راحت" },
  { value: "compact", label: "فشرده" },
]
 
export function RadioGroupRtlExample() {
  return (
    <RadioGroup defaultValue="comfortable">
      {plans.map((plan) => (
        <div key={plan.value} className="flex items-center gap-2">
          <RadioGroupItem value={plan.value} id={`radio-rtl-${plan.value}`} />
          <Label htmlFor={`radio-rtl-${plan.value}`}>{plan.label}</Label>
        </div>
      ))}
    </RadioGroup>
  )
}

API Reference

RadioGroup

Prop	Type	Default	Description
value	string	undefined	The selected value. Use when controlled.
defaultValue	string	undefined	The initially selected value when uncontrolled.
onValueChange	(value, details) => void	—	Called when the selected value changes.
disabled	boolean	false	Prevents interaction with the whole group.

RadioGroupItem

Prop	Type	Default	Description
value	string	required	The value associated with this radio item.
disabled	boolean	false	Prevents selection of this item.

Edit this page on GitHub

PreviousProgress NextSelect