Radio Group

Radio groups wrap multiple radio inputs with consistent spacing, an optional group label, and hint text. They support vertical and horizontal layouts.

Basic vertical group

<div class="radio-group">
  <div class="form-check">
    <input type="radio" name="plan" id="plan-free" checked>
    <label for="plan-free">Free</label>
  </div>
  <div class="form-check">
    <input type="radio" name="plan" id="plan-pro">
    <label for="plan-pro">Pro</label>
  </div>
  <div class="form-check">
    <input type="radio" name="plan" id="plan-enterprise">
    <label for="plan-enterprise">Enterprise</label>
  </div>
</div>

Horizontal group

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

With group label

<fieldset>
  <legend class="radio-group-label">Shipping method</legend>
  <div class="radio-group">
    ...
  </div>
</fieldset>

With hint text

<span class="radio-group-hint">Choose how often you want to receive notifications.</span>

Disabled option

Accessibility notes

• Use <fieldset> + <legend> to group related radio inputs. This is the recommended accessible pattern
• Each radio must have an associated <label> via the for attribute
• Disabled radios are automatically excluded from keyboard navigation
• Arrow keys move between options within a radio group (native browser behaviour)

Do / Don't

Do:

• Use radio groups when the user must pick exactly one option from a list
• Use <fieldset> + <legend> for groups of 3+ options
• Pre-select a sensible default when possible

Don't:

• Don't use radio groups for on/off toggles. Use a checkbox or toggle switch
• Don't use radio groups for multi-select. Use checkboxes instead

Use in another product

The design system installs once per product:

npm install github:bydefaultstudio/design-system-dist#semver:^4.7.0

This component's styles ship in design-system.css. No JavaScript, nothing else to include.