Radio Group

A set of checkable buttons where only one can be selected at a time.

export default function RadioGroupHero() {
  return (
    <RadioGroup defaultValue="daily" className="w-64">
      {OPTIONS.map(({ value, label }) => (
        <label key={value} className="flex cursor-pointer items-center gap-2 text-sm text-primary">
          <RadioGroupItem value={value} />
          {label}
        </label>
      ))}
    </RadioGroup>
  );
}

Installation

pnpm dlx shadcn@latest add "https://ora-ui.com/r/radio-group.json"

Usage

import { Label } from '@/registry/ui/label';
import { RadioGroup, RadioGroupItem } from '@/registry/ui/radio-group';

<RadioGroup defaultValue="a">
  <label className="flex items-center gap-2">
    <RadioGroupItem value="a" />
    Option A
  </label>
  <label className="flex items-center gap-2">
    <RadioGroupItem value="b" />
    Option B
  </label>
</RadioGroup>;

Examples

Variant

The variant prop controls the visual style of the radio.

export function RadioGroupSolid() {
  return (
    <RadioGroup defaultValue="a" className="w-48">
      <label className="flex cursor-pointer items-center gap-2 text-sm text-primary">
        <RadioGroupItem value="a" />
        Option A
      </label>
      <label className="flex cursor-pointer items-center gap-2 text-sm text-primary">
        <RadioGroupItem value="b" />
        Option B
      </label>
    </RadioGroup>
  );
}

API Reference

PropTypeDefault
variant"solid" | "surface""solid"

All other props are forwarded to the underlying Base UI Radio primitive.