Radio Group

<RadioGroup defaultValue="comfortable">
  <div class="flex items-center gap-2"><RadioGroupItem value="default" id="r1" /><Label for="r1">Default</Label></div>
  <div class="flex items-center gap-2"><RadioGroupItem value="comfortable" id="r2" /><Label for="r2">Comfortable</Label></div>
  <div class="flex items-center gap-2"><RadioGroupItem value="compact" id="r3" /><Label for="r3">Compact</Label></div>
</RadioGroup>

A set of mutually-exclusive radio options.

Installation

railbase ui add radio-group

Usage

import { RadioGroup, RadioGroupItem } from "@/lib/ui/radio-group";

<RadioGroup defaultValue="a">
  <div class="flex items-center gap-2"><RadioGroupItem value="a" id="a" /><Label for="a">Option A</Label></div>
  <div class="flex items-center gap-2"><RadioGroupItem value="b" id="b" /><Label for="b">Option B</Label></div>
</RadioGroup>

Anatomy

Exported parts: RadioGroup · RadioGroupItem