Radio buttons are used to select a single item in a list of options.
To render a radio button, apply the class a-input to an input type="radio".
For proper styling, radio buttons require an empty label element defined immediately after their declaration.
Group radio buttons in m-formGroup for easy stacking.
<div class="m-formGroup">
<input class="a-input" type="radio" name="radios" id="radio1">
<label for="radio1"></label>
<label class="-text" for="radio1">Radio Button</label>
</div>
<div class="m-formGroup">
<input class="a-input" type="radio" name="radios" id="radio2" disabled>
<label for="radio2"></label>
<label class="-text" for="radio2">Disabled Radio Button</label>
</div>
Apply the class -inline to m-formGroup to display radio buttons inline.
<div class="m-formGroup -inline">
<input class="a-input" type="radio" name="inlineRadios" id="inlineRadio1">
<label for="inlineRadio1"></label>
<label class="-text" for="inlineRadio1">Option 1</label>
</div>
<div class="m-formGroup -inline">
<input class="a-input" type="radio" name="inlineRadios" id="inlineRadio2" disabled>
<label for="inlineRadio2"></label>
<label class="-text" for="inlineRadio2">Option 2</label>
</div>