Radio

Radio buttons allow users to select exactly one option from a set of mutually exclusive choices.

Usage

Use radio buttons when users must select exactly one option from a visible list.

Basic Radio Group

Select your planFreeProEnterprise

<span class="df-label">Select your plan</span>
<label class="df-radio">
  <input type="radio" name="plan" value="free">
  <span class="df-radio__circle"></span>
  <span class="df-radio__label">Free</span>
</label>
<label class="df-radio">
  <input type="radio" name="plan" value="pro" checked>
  <span class="df-radio__circle"></span>
  <span class="df-radio__label">Pro</span>
</label>
<label class="df-radio">
  <input type="radio" name="plan" value="enterprise">
  <span class="df-radio__circle"></span>
  <span class="df-radio__label">Enterprise</span>
</label>

Horizontal Layout

SmallMediumLarge

<div class="df-radio-group df-radio-group--horizontal">
  <label class="df-radio">...</label>
  <label class="df-radio">...</label>
  <label class="df-radio">...</label>
</div>

States

Disabled

Disabled uncheckedDisabled checked

Error State

Option 1Option 2

Please select an option

With Description

Standard Shipping5-7 business days - Free

Express Shipping2-3 business days - $9.99

Overnight ShippingNext business day - $24.99

<label class="df-radio df-radio--with-desc">
  <input type="radio" name="shipping" value="standard">
  <span class="df-radio__circle"></span>
  <div>
    <span class="df-radio__label">Standard Shipping</span>
    <span class="df-radio__desc">5-7 business days - Free</span>
  </div>
</label>

Radio Cards

Basic Plan$9/mo

Perfect for individuals and small projects

Pro Plan$29/mo

For growing teams and businesses

Accessibility

• Group related radios with fieldset and legend
• All radios in a group must share the same name
• Ensure keyboard navigation works (arrow keys)
• Provide clear focus states

Best Practices

• Use radios when only one selection is allowed
• Keep the list to 5-7 options maximum
• Put the most likely option first
• Consider radio cards for complex options

API Reference

Classes

Class	Description
df-radio	Base wrapper class
df-radio__circle	Visual radio element
df-radio__label	Label text
df-radio__desc	Description text
df-radio--error	Error state
df-radio--with-desc	Radio with description
df-radio-card	Card-style radio