Shadcn Radio Group for React

Installation

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

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

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

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

bun add react-aria-components

npm install react-aria-components

pnpm add react-aria-components

yarn add react-aria-components

"use client";

import type React from "react";
import {
  composeRenderProps,
  RadioGroup as RadioGroupPrimitive,
  type RadioGroupProps,
  Radio as RadioPrimitive,
  type RadioProps,
} from "react-aria-components";
import { cn } from "@/lib/utils";
import { FieldLabel } from "@/components/ui/field";

export const RadioGroup = (props: RadioGroupProps) => {
  const { className, ...rest } = props;

  return (
    <RadioGroupPrimitive

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

Demos

Description

Radio group items with a description using the Field component.

Choice Card

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

Fieldset

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

Disabled

Use the disabled prop on RadioGroup to disable all items.

Invalid

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

Rtl

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

API Reference