Radio Group

A set of checkable buttons, known as radio buttons, where no more than one of the buttons can be checked at a time.

Default

Comfortable

Compact

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

Installation


pnpm dlx shadcn@latest add https://anotherui.dev/r/radio-group.json

Usage

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

<RadioGroup defaultValue="option-one">
  <div className="flex items-center gap-3">
    <RadioGroupItem value="option-one" id="option-one" />
    <Label htmlFor="option-one">Option One</Label>
  </div>
  <div className="flex items-center gap-3">
    <RadioGroupItem value="option-two" id="option-two" />
    <Label htmlFor="option-two">Option Two</Label>
  </div>
</RadioGroup>

Composition

Use the following composition to build a RadioGroup:

RadioGroup
├── RadioGroupItem
└── RadioGroupItem

Description

Radio group items with a description using the Field component.

Default

Standard spacing for most use cases.

Comfortable

More space between elements.

Compact

Minimal spacing for dense layouts.

import {
  Field,
  FieldContent,

Choice Card

Use FieldLabel to wrap the entire Field for a clickable card-style selection.

Plus

For individuals and small teams.

Pro

For growing businesses.

Enterprise

For large teams and enterprises.

import {
  Field,
  FieldContent,

Fieldset

Use FieldSet and FieldLegend to group radio items with a label and description.

Subscription Plan

Yearly and lifetime plans offer significant savings.

Monthly ($9.99/month)

Yearly ($99.99/year)

Lifetime ($299.99)

import {
  Field,
  FieldDescription,

Disabled

Use the isDisabled prop on RadioGroup to disable all items.

Disabled

Option 2

Option 3

import { Field, FieldLabel } from "@/components/ui/field"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"

Invalid

Use isInvalid on RadioGroupItem and data-invalid on Field to show validation errors.

Notification Preferences

Choose how you want to receive notifications.

Email only

SMS only

Both Email & SMS

import {
  Field,
  FieldDescription,

RTL

To enable RTL support, see the RTL configuration guide.

افتراضي

تباعد قياسي لمعظم حالات الاستخدام.

مريح

مساحة أكبر بين العناصر.

مضغوط

تباعد أدنى للتخطيطات الكثيفة.

"use client"

import * as React from "react"

API Reference

See the React Aria Radio Group documentation.

Questionnaire Rating

On This Page

Installation Usage Composition Description Choice Card Fieldset Disabled Invalid RTL API Reference