Cena Research Institute | Cardiovascular Trial Site & CRO in Houston

Basic Usage

Radio groups are controlled components that require state management. They should always be used with labels.

Radio Group

Option 1

Option 2

Option 3

States

Radio buttons support selected, unselected, and disabled states.

Selected

Unselected

Disabled

With Labels

Radio groups should always be paired with labels for accessibility.

With Labels

Apple

Banana

Orange

Usage

"use client";

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

export function MyComponent() {
  const [selected, setSelected] = useState("option1");

  return (
    <RadioGroup value={selected} onValueChange={setSelected}>
      <div className="flex items-center gap-2">
        <RadioGroupItem value="option1" id="opt1" />
        <label htmlFor="opt1">Option 1</label>
      </div>
      <div className="flex items-center gap-2">
        <RadioGroupItem value="option2" id="opt2" />
        <label htmlFor="opt2">Option 2</label>
      </div>
    </RadioGroup>
  );
}

Props

Prop	Type	Default	Description
`value`	`string`	-	The value of the selected radio item
`onValueChange`	`(value: string) => void`	-	Callback fired when the selected value changes
`disabled`	`boolean`	`false`	Whether the radio item is disabled

Material 3 Features

State Layers: Hover (8%) and press (12%) states using Material 3 opacity tokens
Focus Ring: Proper focus indicators for keyboard navigation
Theme Support: Automatically adapts to light and dark themes
Accessibility: Full keyboard navigation and ARIA support via Radix UI
Group Management: Only one option can be selected at a time