Radio

Default

Comfortable

Compact

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

Installation

npx bearnie add radio

Usage

import { RadioGroup, RadioGroupItem } from "@/components/bearnie/radio"

<RadioGroup name="options" defaultValue="one">
  <div class="flex items-center gap-3">
    <RadioGroupItem value="one" id="option-one" />
    <Label for="option-one">Option One</Label>
  </div>
  <div class="flex items-center gap-3">
    <RadioGroupItem value="two" id="option-two" />
    <Label for="option-two">Option Two</Label>
  </div>
</RadioGroup>

Examples

Horizontal

Small

Medium

Large

<RadioGroup name="size" defaultValue="md" orientation="horizontal">
  <div class="flex items-center gap-2">
    <RadioGroupItem value="sm" id="sm" />
    <Label for="sm">Small</Label>
  </div>
  <div class="flex items-center gap-2">
    <RadioGroupItem value="md" id="md" />
    <Label for="md">Medium</Label>
  </div>
  <div class="flex items-center gap-2">
    <RadioGroupItem value="lg" id="lg" />
    <Label for="lg">Large</Label>
  </div>
</RadioGroup>

With description

Comfortable

Default spacing for most users.

Compact

Reduced spacing for power users.

<RadioGroup name="plan" defaultValue="comfortable" class="gap-4">
  <div class="flex items-start gap-3">
    <RadioGroupItem value="comfortable" id="comfortable" class="mt-1" />
    <div class="grid gap-1">
      <Label for="comfortable">Comfortable</Label>
      <p class="text-sm text-muted-foreground">Default spacing for most users.</p>
    </div>
  </div>
  <div class="flex items-start gap-3">
    <RadioGroupItem value="compact" id="compact" class="mt-1" />
    <div class="grid gap-1">
      <Label for="compact">Compact</Label>
      <p class="text-sm text-muted-foreground">Reduced spacing for power users.</p>
    </div>
  </div>
</RadioGroup>

Disabled

Option One

Option Two

<RadioGroup name="disabled-group" disabled>
  <div class="flex items-center gap-3">
    <RadioGroupItem value="one" id="d1" />
    <Label for="d1">Option One</Label>
  </div>
  <div class="flex items-center gap-3">
    <RadioGroupItem value="two" id="d2" />
    <Label for="d2">Option Two</Label>
  </div>
</RadioGroup>

Card style

PersonalFor individual use

TeamFor small teams

<RadioGroup name="card-plan" defaultValue="team" class="grid gap-4 md:grid-cols-2">
  <label
    for="personal"
    class="flex cursor-pointer items-start gap-3 rounded-lg border p-4 has-[:checked]:border-primary has-[:checked]:bg-primary/5"
  >
    <RadioGroupItem value="personal" id="personal" class="mt-0.5" />
    <div class="grid gap-1">
      <span class="font-medium">Personal</span>
      <span class="text-sm text-muted-foreground">For individual use</span>
    </div>
  </label>
  <label
    for="team"
    class="flex cursor-pointer items-start gap-3 rounded-lg border p-4 has-[:checked]:border-primary has-[:checked]:bg-primary/5"
  >
    <RadioGroupItem value="team" id="team" class="mt-0.5" />
    <div class="grid gap-1">
      <span class="font-medium">Team</span>
      <span class="text-sm text-muted-foreground">For small teams</span>
    </div>
  </label>
</RadioGroup>

Standalone Radio

Option One

Option Two

<div class="flex flex-col gap-2">
  <div class="flex items-center gap-2">
    <Radio id="option-one" name="standalone" value="one" />
    <Label for="option-one">Option One</Label>
  </div>
  <div class="flex items-center gap-2">
    <Radio id="option-two" name="standalone" value="two" />
    <Label for="option-two">Option Two</Label>
  </div>
</div>

Anatomy

RadioGroup - Container that manages the radio group state
RadioGroupItem - Individual radio button within a group
Radio - Standalone radio input for simple use cases

Props

RadioGroup

Prop	Type	Default	Description
name	string	-	Required. Groups radio buttons together
defaultValue	string	-	Initially selected value
disabled	boolean	false	Disables all items in the group
required	boolean	false	Makes selection required
orientation	”horizontal” \| “vertical"	"vertical”	Layout direction
class	string	-	Additional CSS classes

RadioGroupItem

Prop	Type	Default	Description
value	string	-	Required. Form value when selected
id	string	-	Element ID for label association
disabled	boolean	false	Disables this item
checked	boolean	false	Controlled checked state
class	string	-	Additional CSS classes

Prop	Type	Default	Description
id	string	-	Element ID for label association
name	string	-	Groups radio buttons together
value	string	-	Form value when selected
checked	boolean	false	Default checked state
disabled	boolean	false	Disables the radio
required	boolean	false	Makes selection required
class	string	-	Additional CSS classes