RadioGroup

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

Default

Basic radio group.

html 
<div data-group="default" class="uc-space-y-3">
  <label class="uc-flex uc-items-center uc-gap-3 uc-cursor-pointer">
    <div class="uc-radio selected"><div class="uc-dot"></div></div>
    <span class="uc-text-sm uc-font-medium">Option A</span>
  </label>
  <label class="uc-flex uc-items-center uc-gap-3 uc-cursor-pointer">
    <div class="uc-radio"><div class="uc-dot"></div></div>
    <span class="uc-text-sm uc-font-medium">Option B</span>
  </label>
</div>

With Description

Radio options with helper text.

html

Notification preferences

<p class="uc-text-sm uc-font-medium uc-mb-4">Notification preferences</p>
<div class="uc-space-y-4">
  <label class="uc-flex uc-items-start uc-gap-3 uc-cursor-pointer">
    <div class="uc-radio selected uc-mt-0.5"><div class="uc-dot"></div></div>
    <div>
      <p class="uc-text-sm uc-font-medium">All notifications</p>
      <p class="uc-text-sm uc-text-fg-disabled">Get notified about everything.</p>
    </div>
  </label>
  <label class="uc-flex uc-items-start uc-gap-3 uc-cursor-pointer">
    <div class="uc-radio uc-mt-0.5"><div class="uc-dot"></div></div>
    <div>
      <p class="uc-text-sm uc-font-medium">Mentions only</p>
      <p class="uc-text-sm uc-text-fg-disabled">Only get notified when someone mentions you.</p>
    </div>
  </label>
  <label class="uc-flex uc-items-start uc-gap-3 uc-cursor-pointer">
    <div class="uc-radio uc-mt-0.5"><div class="uc-dot"></div></div>
    <div>
      <p class="uc-text-sm uc-font-medium">Nothing</p>
      <p class="uc-text-sm uc-text-fg-disabled">Turn off all notifications.</p>
    </div>
  </label>
</div>

Card Style

Radio options as selectable cards.

html

Choose a plan

<p class="uc-text-sm uc-font-medium uc-mb-4">Choose a plan</p>
<div class="uc-space-y-3">
  <label class="uc-flex uc-items-center uc-gap-4 uc-p-4 uc-rounded-2xl uc-border uc-border-accents-blue uc-cursor-pointer">
    <div class="uc-radio selected"><div class="uc-dot"></div></div>
    <div class="uc-flex-1">
      <p class="uc-text-sm uc-font-medium">Free</p>
      <p class="uc-text-xs uc-text-fg-disabled">Up to 3 projects</p>
    </div>
    <span class="uc-text-sm uc-font-semibold">$0/mo</span>
  </label>
  <label class="uc-flex uc-items-center uc-gap-4 uc-p-4 uc-rounded-2xl uc-border uc-border-border-default uc-cursor-pointer">
    <div class="uc-radio"><div class="uc-dot"></div></div>
    <div class="uc-flex-1">
      <p class="uc-text-sm uc-font-medium">Pro</p>
      <p class="uc-text-xs uc-text-fg-disabled">Unlimited projects</p>
    </div>
    <span class="uc-text-sm uc-font-semibold">$19/mo</span>
  </label>
</div>

Horizontal

Radio options in a row.

html 
<div class="uc-flex uc-flex-wrap uc-gap-6">
  <label class="uc-flex uc-items-center uc-gap-2 uc-cursor-pointer">
    <div class="uc-radio selected"><div class="uc-dot"></div></div>
    <span class="uc-text-sm">System</span>
  </label>
  <label class="uc-flex uc-items-center uc-gap-2 uc-cursor-pointer">
    <div class="uc-radio"><div class="uc-dot"></div></div>
    <span class="uc-text-sm">Light</span>
  </label>
  <label class="uc-flex uc-items-center uc-gap-2 uc-cursor-pointer">
    <div class="uc-radio"><div class="uc-dot"></div></div>
    <span class="uc-text-sm">Dark</span>
  </label>
</div>

Disabled

Disabled radio group.

html 
<div class="uc-space-y-3 uc-opacity-50">
  <label class="uc-flex uc-items-center uc-gap-2 uc-cursor-not-allowed">
    <div class="uc-radio disabled selected"><div class="uc-dot"></div></div>
    <span class="uc-text-sm">Selected (disabled)</span>
  </label>
  <label class="uc-flex uc-items-center uc-gap-2 uc-cursor-not-allowed">
    <div class="uc-radio disabled"><div class="uc-dot"></div></div>
    <span class="uc-text-sm">Option (disabled)</span>
  </label>
</div>

API Reference

All CSS classes available for the RadioGroup component.

Class Type Description
uc-radio Base Radio button circle — border, size, transition
uc-dot Base Inner dot element inside the radio circle
selected State Selected state — fills dot and highlights border
disabled State Disabled state — no interaction allowed
uc-flex uc-items-center uc-gap-3 Layout Radio + label row alignment
uc-flex uc-items-start uc-gap-3 Layout Radio + label with description alignment
uc-space-y-3 Layout Vertical spacing between radio options
uc-flex uc-flex-wrap uc-gap-6 Layout Horizontal radio group layout
uc-p-4 uc-rounded-2xl uc-border Layout Card-style radio option container
uc-border-accents-blue Modifier Selected card border highlight
uc-cursor-pointer Modifier Pointer cursor for interactive radio labels
uc-cursor-not-allowed Modifier Not-allowed cursor for disabled radio labels
uc-opacity-50 Modifier Reduced opacity for disabled group
uc-text-sm uc-font-medium Typography Radio option label text
uc-text-sm uc-text-fg-disabled Typography Radio option description text

Accessibility

Keyboard and screen reader support.

Feature Details
Role Use native input[type="radio"] within a fieldset for built-in semantics
Group Wrap related radios in fieldset with legend describing the group
Keyboard Arrow keys move selection within group, Tab moves out of group
Label Each radio must have a visible label linked via for/id
Required If required, add aria-required="true" to the group