Radio

Native <input> radios to select a item from multiple ones.

Basic radio

Radios are styled using .radio on the <input> element. Radios have 24px (1.5rem) size to meet WCAG 2.2 standards for touch targets.

<input type="radio" id="radio11" name="radio1" class="radio" />

With form field

Wrap .radio in .form-field to lay the radio and label side by side.

<div class="form-field">
    <input type="radio" id="radio21" name="radio2" class="radio" checked />
    <label for="radio21">Example radio 1</label>
</div>
<div class="form-field">
    <input type="radio" id="radio22" name="radio2" class="radio" checked />
    <label for="radio22">Example radio 2</label>
</div>

Disabled

Add disabled attribute in .radio to gray out the radio as well as the supporting label.

<div class="form-field">
    <input type="radio" id="radio31" name="radio3" class="radio" disabled />
    <label for="radio31">Disabled radio</label>
</div>
<div class="form-field">
    <input type="radio" id="radio32" name="radio3" class="radio" disabled checked />
    <label for="radio32">Disabled radio that is checked</label>
</div>