Radio buttons are used to select a single item in a list of options.
Group radio buttons in m-form__item
for easy stacking.
<fieldset>
<legend class="a-label">Select an option</legend>
<div class="m-form__item">
<div class="a-radio">
<input class="a-radio__input" type="radio" name="radios" id="radio1">
<label class="a-radio__label" for="radio1">Radio Button</label>
</div>
</div>
<div class="m-form__item">
<div class="a-radio">
<input class="a-radio__input" type="radio" name="radios" id="radio2" disabled>
<label class="a-radio__label" for="radio2">Disabled Radio Button</label>
</div>
</div>
</fieldset>
Apply -inline
to display inline two or more radio buttons.
<fieldset>
<legend class="a-label">Select an option</legend>
<div class="m-form__item -inline">
<div class="a-radio">
<input class="a-radio__input" type="radio" name="inlineRadios" id="inlineRadio1">
<label class="a-radio__label" for="inlineRadio1">Option 1</label>
</div>
</div>
<div class="m-form__item -inline">
<div class="a-radio">
<input class="a-radio__input" type="radio" name="inlineRadios" id="inlineRadio2" disabled>
<label class="a-radio__label" for="inlineRadio2">Option 2</label>
</div>
</div>
</fieldset>
Radio button lists are used to wrap a series of radio buttons in a list.
To render a series of radio buttons in a list, apply the class -list
to m-form__item
.
<fieldset>
<legend class="a-label">Select an option</legend>
<ul class="m-form__item -list">
<li class="m-form__item">
<div class="a-radio">
<input type="radio" class="a-radio__input" name="radiobuttonList" id="radio1">
<label class="a-radio__label" for="radio1">Option 1</label>
</div>
</li>
<li class="m-form__item">
<div class="a-radio">
<input type="radio" class="a-radio__input" name="radiobuttonList" id="radio2">
<label class="a-radio__label" for="radio2">Option 2</label>
</div>
</li>
<li class="m-form__item">
<div class="a-radio">
<input type="radio" class="a-radio__input" name="radiobuttonList" id="radio3">
<label class="a-radio__label" for="radio3">Option 3</label>
</div>
</li>
<li class="m-form__item">
<div class="a-radio">
<input type="radio" class="a-radio__input" name="radiobuttonList" id="radio4">
<label class="a-radio__label" for="radio4">Option 4</label>
</div>
</li>
<li class="m-form__item">
<div class="a-radio">
<input type="radio" class="a-radio__input" name="radiobuttonList" id="radio5">
<label class="a-radio__label" for="radio5">Option 5</label>
</div>
</li>
</ul>
</fieldset>