Shadcn Radio Group for React

Installation

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

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

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

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

bun add @base-ui/react

npm install @base-ui/react

pnpm add @base-ui/react

yarn add @base-ui/react

"use client";

import { Radio as RadioPrimitive } from "@base-ui/react/radio";
import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group";
import type React from "react";
import { cn } from "@/lib/utils";
import { FieldLabel } from "@/components/ui/field";

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

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

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