Radio

A radio button is a UI element that allows users to select one option from a group. Unlike checkboxes, radio buttons are mutually exclusive—selecting one automatically deselects the others in the same group.


Radio without label

<div class="form-radio-label-row">
    <label class="form-radio-label form-label-sm" for="radio-1"><input type="radio" id="radio-1" class="form-radio-input" aria-label="radio" /><span class="form-radio-label__text"></span></label>
</div>
<div class="form-radio-label-row">
    <label class="form-radio-label form-label-sm" for="radio-2"><input type="radio" id="radio-2" class="form-radio-input" aria-label="radio" checked /><span class="form-radio-label__text"></span></label>
</div>
<div class="form-radio-label-row">
    <label class="form-radio-label form-label-sm" for="radio-3"><input type="radio" id="radio-3" class="form-radio-input" aria-label="radio" disabled="" /><span class="form-radio-label__text"></span></label>
</div>

Radio with label

<div class="form-radio-label-row">
    <label class="form-radio-label form-label-sm" for="radio-4">
        <input type="radio" id="radio-4" class="form-radio-input" aria-label="radio" /><span class="form-radio-label__text">Radio Button With Label</span>
    </label>
</div>
<div class="form-radio-label-row">
    <label class="form-radio-label form-label-sm" for="radio-5"><input type="radio" id="radio-5" class="form-radio-input" aria-label="radio" checked /><span class="form-radio-label__text">Active Radio Button With Label</span></label>
</div>
<div class="form-radio-label-row">
    <label class="form-radio-label form-label-sm" for="radio-6"><input type="radio" id="radio-6" class="form-radio-input" aria-label="radio" disabled="" /><span class="form-radio-label__text">Disabled Radio Button With Label</span></label>
</div>