Radio group

import { RadioGroup } from "@/components/ui/radio-group";

import { RadioGroup } from "@/components/ui/radio-group";

export function Example() {
  return (
    <RadioGroup
      defaultValue="comfortable"
      options={[
        { value: "default", label: "Default" },
        { value: "comfortable", label: "Comfortable" },
        { value: "compact", label: "Compact (disabled)", disabled: true },
      ]}
    />
  );
}

RadioGroup                       (single component — pass options as data)
├── type="default" | "card" | "pill" | "chip" | "tile" | "image"
├── options={[
│     { value, label, caption?, meta?, icon?, disabled? },
│     …
│   ]}
└── otherOption={{ value, label, caption?, placeholder? }}
    + otherValue / onOtherValueChange / defaultOtherValue

variant rendering:
  default → bare radios + labels (rows)
  card    → full-width bordered card per option (label + caption + meta)
  pill    → content-width compact card (radio + label, wraps inline)
  chip    → borderless tile (label + optional meta line, wraps inline)
  tile    → large icon-led card (icon + label + caption, centered)
  image   → image picker — the image is the tile, radio dot in its corner
            (add `bento` for mixed-shape images)

For multi-select, see <MultiSelect /> in @/components/ui/multi-select
(documented on the /multi-select page) — same flat options shape, with
type="cards" or type="chip-group".

Slot exports — RadioGroupItem, RadioGroupCard, RadioGroupCardLabel,
RadioGroupCardDescription — remain as the escape hatch for fully custom
layouts.