Radio

A radio is one of a set of mutually exclusive options. Picking one deselects the others in the same group. Use radios for binary or small fixed-option choices where the visible options matter. For longer lists, reach for Select instead.

Default

export default function RadioGroup() {  return (    <div className="flex flex-col gap-xs">      <label className="radio-group">        <input className="radio" type="radio" name="zazz-preview-radio" defaultChecked />        <span className="form-label">Option A</span>      </label>      <label className="radio-group">        <input className="radio" type="radio" name="zazz-preview-radio" />        <span className="form-label">Option B</span>      </label>      <label className="radio-group">        <input className="radio" type="radio" name="zazz-preview-radio" />        <span className="form-label">Option C</span>      </label>    </div>  );}

<label class="radio-group">
  <input type="radio" name="plan" value="starter" class="radio" />
  <span class="form-label">Starter</span>
</label>

<label class="radio-group">
  <input type="radio" name="plan" value="pro" class="radio" />
  <span class="form-label">Pro</span>
</label>

Radios in the same group share a name attribute. The browser handles the mutual exclusion.

Tokens

The checked appearance uses a 5px border that visually shrinks the background, creating a centered dot effect without an inner element.

States

• Unchecked. Border --border, background --input.
• Checked. Border thickens to 5px --primary. Background switches to --background so the visible center reads as the page surface.
• Focus. Focus ring outlines the input.
• Disabled. Set disabled on the input.

Composing a group

<fieldset class="form-group">
  <legend class="form-label">Plan</legend>
  <label class="radio-group">
    <input type="radio" name="plan" value="starter" class="radio" />
    <span>Starter</span>
  </label>
  <label class="radio-group">
    <input type="radio" name="plan" value="pro" class="radio" />
    <span>Pro</span>
  </label>
  <label class="radio-group">
    <input type="radio" name="plan" value="team" class="radio" />
    <span>Team</span>
  </label>
</fieldset>

<fieldset> and <legend> give the group an accessible name. The shared name="plan" keeps the radios mutually exclusive.

Accessibility

• Always wrap each radio in a <label> so clicking the label selects the option.
• Group related radios in <fieldset> with a <legend> describing what the choice is for.
• Sharing a name attribute is what makes radios mutually exclusive. The browser also handles keyboard navigation (Arrow to move between options, Space to select).
• For a required radio group, use required on at least one input in the group.

Cross-platform

Where to next