shadcn.io is not affiliated with official shadcn/ui

Shadcn Radio Group for React

Allows single selection from multiple options.

Installation

bunx --bun shadcn@latest add https://kit.dev/r/radix/radio-group.json

npx shadcn@latest add https://kit.dev/r/radix/radio-group.json

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

yarn shadcn@latest add https://kit.dev/r/radix/radio-group.json

This component depends on Field. Install it first if you haven't already.

Install the following dependencies:

bun add radix-ui

npm install radix-ui

pnpm add radix-ui

yarn add radix-ui

Copy and paste the following code into your project.

components/ui/radio-group.tsx

"use client";

import { RadioGroup as RadioGroupPrimitive } from "radix-ui";
import type React from "react";
import { cn } from "@/lib/utils";
import { FieldLabel } from "@/components/ui/field";

export const RadioGroup = (
  props: React.ComponentProps<typeof RadioGroupPrimitive.Root>
) => {
  const { className, ...rest } = props;

  return (
    <RadioGroupPrimitive.Root
      className={cn("cn-radio-group w-full", className)}
      data-slot="radio-group"
      {...rest}
    />

Update the import paths to match your project setup.

Anatomy

RadioGroup
├── RadioGroupLabel
├── RadioGroupItem
│   ├── RadioGroupText
│   └── RadioGroupItemControl
└── RadioGroupIndicator

Usage

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

<RadioGroup className="w-fit" defaultValue="comfortable">
  <RadioGroupItem value="default">Default</RadioGroupItem>
  <RadioGroupItem value="comfortable">Comfortable</RadioGroupItem>
  <RadioGroupItem value="compact">Compact</RadioGroupItem>
</RadioGroup>

Accessibility

Key	Description
`Space`	Activate the focused control.
`End`	Go to the end.

Demos

Description

Radio group items with a description using the Field component.

PreviewCode

Choice Card

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

PreviewCode

Fieldset

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

PreviewCode

Disabled

Use the disabled prop on RadioGroup to disable all items.

PreviewCode

Invalid

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

PreviewCode

Rtl

Right-to-left radio group. See the RTL configuration guide for document direction.

PreviewCode

API Reference

RadioGroup

div

PropType

value?string | null

defaultValue?string

onValueChange?RadioGroupContextValue["onValueChange"]

dir?RovingFocusGroupProps["dir"]

disabled?React.ComponentPropsWithoutRef<typeof Radio>["disabled"]

form?React.ComponentPropsWithoutRef<typeof Radio>["form"]

loop?RovingFocusGroupProps["loop"]

name?RadioGroupContextValue["name"]

orientation?RovingFocusGroupProps["orientation"]

required?React.ComponentPropsWithoutRef<typeof Radio>["required"]

asChild?boolean

className?string

AttributeType

data-slot"radio-group"

data-scope"radio-group"

data-part"root"

aria-disabledstring

aria-labelledbystring

aria-orientationRovingFocusGroupProps["orientation"]

aria-readonlystring

aria-requiredstring

data-disabled?string

data-invalid?string

data-orientationRovingFocusGroupProps["orientation"]

data-required?string

role"radiogroup"

RadioGroupItem

label

PropType

valuestring

defaultValue?string

onValueChange?RadioGroupContextValue["onValueChange"]

dir?RovingFocusGroupProps["dir"]

disabled?React.ComponentPropsWithoutRef<typeof Radio>["disabled"]

form?React.ComponentPropsWithoutRef<typeof Radio>["form"]

loop?RovingFocusGroupProps["loop"]

name?RadioGroupContextValue["name"]

orientation?RovingFocusGroupProps["orientation"]

required?React.ComponentPropsWithoutRef<typeof Radio>["required"]

asChild?boolean

className?string

AttributeType

data-slot"radio-group-item"

data-scope"radio-group"

data-part"item"

RadioGroupIndicator

div

PropType

value?string | null

defaultValue?string

onValueChange?RadioGroupContextValue["onValueChange"]

dir?RovingFocusGroupProps["dir"]

disabled?React.ComponentPropsWithoutRef<typeof Radio>["disabled"]

form?React.ComponentPropsWithoutRef<typeof Radio>["form"]

loop?RovingFocusGroupProps["loop"]

name?RadioGroupContextValue["name"]

orientation?RovingFocusGroupProps["orientation"]

required?React.ComponentPropsWithoutRef<typeof Radio>["required"]

AttributeType

data-slot"radio-group-indicator"

data-scope"radio-group"

data-part"indicator"

data-disabled?string

data-orientationRovingFocusGroupProps["orientation"]

CSS variableType

--heightstring

--leftstring

--topstring

--transition-propertystring

--widthstring

RadioGroupText

PropType

value?string | null

defaultValue?string

onValueChange?RadioGroupContextValue["onValueChange"]

dir?RovingFocusGroupProps["dir"]

disabled?React.ComponentPropsWithoutRef<typeof Radio>["disabled"]

form?React.ComponentPropsWithoutRef<typeof Radio>["form"]

loop?RovingFocusGroupProps["loop"]

name?RadioGroupContextValue["name"]

orientation?RovingFocusGroupProps["orientation"]

required?React.ComponentPropsWithoutRef<typeof Radio>["required"]

asChild?boolean

AttributeType

data-slot"radio-group-item-text"

data-scope"radio-group"

data-part"root"

aria-disabledstring

aria-labelledbystring

aria-orientationRovingFocusGroupProps["orientation"]

aria-readonlystring

aria-requiredstring

data-disabled?string

data-invalid?string

data-orientationRovingFocusGroupProps["orientation"]

data-required?string

role"radiogroup"

RadioGroupLabel

PropType

value?string | null

defaultValue?string

onValueChange?RadioGroupContextValue["onValueChange"]

dir?RovingFocusGroupProps["dir"]

disabled?React.ComponentPropsWithoutRef<typeof Radio>["disabled"]

form?React.ComponentPropsWithoutRef<typeof Radio>["form"]

loop?RovingFocusGroupProps["loop"]

name?RadioGroupContextValue["name"]

orientation?RovingFocusGroupProps["orientation"]

required?React.ComponentPropsWithoutRef<typeof Radio>["required"]

asChild?boolean

AttributeType

data-slot"radio-group-label"

data-scope"radio-group"

data-part"root"

aria-disabledstring

aria-labelledbystring

aria-orientationRovingFocusGroupProps["orientation"]

aria-readonlystring

aria-requiredstring

data-disabled?string

data-invalid?string

data-orientationRovingFocusGroupProps["orientation"]

data-required?string

role"radiogroup"