Radio Buttons - ExpressiveCSS

A <label> wrapping <input type="radio"> is the control. The label text is a sibling of the input — no extra class, no required <span>. They are CSS only. There is no JavaScript component and nothing to AutoInit.

Tokens follow the M3 radio spec. The icon is a 20dp ring with a 2dp stroke. Selected is primary with a 10dp inner disc (the M3 gap). The state layer is 40dp at 8% hover and 10% focus. The touch target is 48dp. The label is body-large / on-surface. Disabled is on-surface at 38%.

Use the same name on every radio in a group. Add disabled to disable one. with-gap is a no-op — the selected state is always the ring plus inner disc.

Colour Red Yellow Green Brown

<fieldset>
  <legend>Colour</legend>
  <label>
    <input name="group1" type="radio" checked>
    Red
  </label>
  <label>
    <input name="group1" type="radio">
    Yellow
  </label>
  <label>
    <input name="group1" type="radio" disabled>
    Brown
  </label>
</fieldset>

An input + span still works if you already have that markup, or if you follow BeerCSS’s <label class="radio"> pattern.

<fieldset>
  <legend>Colour</legend>
  <label class="radio">
    <input type="radio" name="group1">
    <span>Yellow</span>
  </label>
</fieldset>

In a row

Put the labels in a <div class="inline"> to sit them on one line. A bare group stacks vertically.

Colour

Red Yellow Green

<fieldset>
  <legend>Colour</legend>
  <div class="inline">
    <label>
      <input name="group2" type="radio" checked>
      Red
    </label>
    <label>
      <input name="group2" type="radio">
      Yellow
    </label>
  </div>
</fieldset>