Wrap an <input type="radio"> in a <label>
to make the control. The label text is a sibling of the input and needs no
extra class or <span>. Radio buttons 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, because the selected state is always the ring plus inner disc.
<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>In a row
Put the labels in a <div class="inline"> to sit them on one
line. A bare group stacks vertically.
<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>