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-check-label">
<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-check-label">
<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-check-label uc-items-start">
<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-check-label uc-items-start">
<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-check-label uc-items-start">
<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-check-label">
<div class="uc-radio selected"><div class="uc-dot"></div></div>
<span class="uc-text-sm">System</span>
</label>
<label class="uc-check-label">
<div class="uc-radio"><div class="uc-dot"></div></div>
<span class="uc-text-sm">Light</span>
</label>
<label class="uc-check-label">
<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-check-label 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-check-label 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-check-label |
Layout | Flex row for radio + label — cursor pointer, gap, alignment |
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 |