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 Group

Toggle buttons can be grouped in a button group if needed.

Option 1

Option 2

Option 3

<div class="form-radio-label-row">
    <label class="form-radio-label form-label-sm" for="radio-7"><input type="radio" id="radio-7" class="form-radio-input" aria-label="radio" name="radiogroup" /><span class="form-radio-label__text">Option 1</span></label>
</div>
<div class="form-radio-label-row">
    <label class="form-radio-label form-label-sm" for="radio-8">
        <input type="radio" id="radio-8" class="form-radio-input" aria-label="radio" name="radiogroup" /><span class="form-radio-label__text">Option 2</span>
    </label>
</div>
<div class="form-radio-label-row">
    <label class="form-radio-label form-label-sm" for="radio-9"><input type="radio" id="radio-9" class="form-radio-input" aria-label="radio" name="radiogroup" /><span class="form-radio-label__text">Option 3</span></label>
</div>