Radio Group

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

const options = [
  { value: "email", label: "Email" },
  { value: "sms", label: "Text message" },
  { value: "push", label: "Push notification" },
]

export default function RadioGroupDemo() {
  return (
    <div className="w-64">
      <RadioGroup aria-label="Notification method" defaultValue="email">
        {options.map((option) => (
          <Label key={option.value}>
            <RadioGroupItem value={option.value} />
            {option.label}
          </Label>
        ))}
      </RadioGroup>
    </div>
  )
}

Radio Group wraps the radio group primitive of the chosen base. RadioGroup holds the selected value and contains one RadioGroupItem per option. Each item renders a round control with an indicator dot when checked; pair it with a Label to give it visible text.

Use a radio group for a small set of mutually exclusive options that should all stay visible. Use Select or Native Select for longer lists, and Checkbox when several options can be selected.

Installation

CLI

$ pnpm dlx shadcn@latest add @esuiss/radio-group

Works in any project with a components.json. See Installation for the one-line registry setup. Or use the suiss/ui CLI:

$ pnpm dlx @esuiss/ui@latest add radio-group

Manual

1. Install the dependencies and add the cn helper:

$ pnpm add @base-ui/react

2. Copy the source into components/ui/radio-group.tsx:

3. Update the import paths to match your project.

Usage

import { RadioGroup, RadioGroupItem } 

<div

Give each RadioGroupItem a unique value. The group is uncontrolled with defaultValue, or controlled with value and onValueChange. Set disabled on the group to disable every item, or on a single item.

Wrap each item and its text in a Label so clicking the text selects the option. The label switches to regular weight automatically next to a radio item.

Examples

With descriptions

Options with a title and a secondary description, linked with aria-labelledby and aria-describedby.

Disabled item

A group where one option is disabled and skipped by arrow-key navigation.

Disabled

A fully disabled group that ignores clicks.

Invalid

Items marked with aria-invalid and shown with a destructive border.

API Reference

Accessibility

• The group has the radiogroup role and each item the radio role with aria-checked.
• Name the group with aria-label or aria-labelledby, and name each item with a wrapping Label or aria-labelledby.
• Arrow keys move focus and selection between items, skipping disabled ones.
• Set aria-invalid on items to communicate a validation error.
• Each item has an enlarged invisible hit area for easier pointer targeting.

Notes

• Styling hooks: data-slot values radio-group, radio-group-item and radio-group-indicator.
• Items carry the peer class, so a following Label can react to their state.
• Uses the primary, primary-foreground and destructive colors, and opacity-50 when disabled.

RadioGroup is a View with the radiogroup role that holds the selected value. Each RadioGroupItem is a small round Pressable with the radio role; when checked it fills with the primary color and shows a dot. Items have an enlarged hit area so they are easy to press.

Installation

$ pnpm dlx shadcn@latest add @esuiss-rn/radio-group

$ pnpm dlx @esuiss/ui@latest add radio-group

$ pnpm dlx @esuiss/ui@latest add radio-group --platform swift