Radio group

How to use it

Use when people must pick exactly one option and each option needs a line of explanation, such as delivery speed or plan type. Preselect a sensible default only when one exists; for long lists (more than about six options) use a select field, and for any-number-of choices use a checkbox group. After copying, change the shared name, the ids and each description id referenced by aria-describedby.

Accessibility

A <fieldset> and <legend> name the group ("Delivery speed"); each native radio has its own <label for> and an aria-describedby pointing at its description, so screen readers read "Express, radio button, 2 of 3, Arrives in 1–2 business days. $9.00." Only the selected radio is a Tab stop and the arrow keys move the selection, as with any radio set. The whole bordered row is the label's click area, and radios are enlarged to 1.25rem with a 2px focus outline. Labels are #0f172a on #ffffff (17.85:1) and descriptions #475569 on #ffffff (7.58:1).

Source (copy-ready)

Copy code

<fieldset class="dcl-radiogroup">
  <legend class="dcl-radiogroup__legend">Delivery speed</legend>
  <div class="dcl-radiogroup__option">
    <input class="dcl-radiogroup__radio" type="radio" id="dcl-radiogroup-standard" name="dcl-radiogroup-delivery" value="standard" aria-describedby="dcl-radiogroup-standard-desc" checked>
    <label class="dcl-radiogroup__label" for="dcl-radiogroup-standard">Standard</label>
    <p class="dcl-radiogroup__desc" id="dcl-radiogroup-standard-desc">Arrives in 3&ndash;5 business days. Free.</p>
  </div>
  <div class="dcl-radiogroup__option">
    <input class="dcl-radiogroup__radio" type="radio" id="dcl-radiogroup-express" name="dcl-radiogroup-delivery" value="express" aria-describedby="dcl-radiogroup-express-desc">
    <label class="dcl-radiogroup__label" for="dcl-radiogroup-express">Express</label>
    <p class="dcl-radiogroup__desc" id="dcl-radiogroup-express-desc">Arrives in 1&ndash;2 business days. $9.00.</p>
  </div>
  <div class="dcl-radiogroup__option">
    <input class="dcl-radiogroup__radio" type="radio" id="dcl-radiogroup-pickup" name="dcl-radiogroup-delivery" value="pickup" aria-describedby="dcl-radiogroup-pickup-desc">
    <label class="dcl-radiogroup__label" for="dcl-radiogroup-pickup">Store pickup</label>
    <p class="dcl-radiogroup__desc" id="dcl-radiogroup-pickup-desc">Ready the next day at your chosen store. Free.</p>
  </div>
</fieldset>
<style>
.dcl-radiogroup { min-width: 0; max-width: 26rem; margin: 0; padding: 0; border: none; font: inherit; color: #0f172a; background-color: #ffffff; }
.dcl-radiogroup__legend { padding: 0; margin-bottom: 0.5rem; font-weight: 600; color: #0f172a; background-color: #ffffff; }
.dcl-radiogroup__option { position: relative; display: grid; grid-template-columns: 1.25rem 1fr; column-gap: 0.6rem; margin-bottom: 0.5rem; padding: 0.75rem; border: 1px solid #94a3b8; border-radius: 0.5rem; }
.dcl-radiogroup__radio { width: 1.25rem; height: 1.25rem; margin: 0.1rem 0 0; accent-color: #1d4ed8; }
.dcl-radiogroup__radio:focus-visible { outline: 2px solid #0f172a; outline-offset: 2px; }
.dcl-radiogroup__label { font-weight: 600; cursor: pointer; color: #0f172a; background-color: #ffffff; }
.dcl-radiogroup__label::after { content: ""; position: absolute; inset: 0; }
.dcl-radiogroup__desc { grid-column: 2; margin: 0.2rem 0 0; font-size: 0.9rem; color: #475569; background-color: #ffffff; }
</style>