Radio button
Radio buttons are for selecting one option from many, while Checkboxes are for selecting one or several options in a list.
<form>
<fieldset>
<legend>Where do you live?</legend>
<div class="field">
<div class="control">
<label class="radio">
<input type="radio" name="live-group" value="England, Northern Ireland or Wales">
England, Northern Ireland or Wales
</label>
</div>
</div>
<div class="field">
<div class="control">
<label class="radio">
<input type="radio" name="live-group" value="Scotland">
Scotland
</label>
</div>
</div>
<p class="help">or</p>
<div class="field">
<div class="control">
<label class="radio">
<input type="radio" name="live-group" value="Channel Islands or Isle of Man">
Channel Islands or Isle of Man
</label>
</div>
</div>
</fieldset>
</form>Wrap the individual radio buttons with the .radio class for spacing.
For more than two options, radio buttons should be stacked.
The following form controls classes are supported: .label, .input, .textarea, .select, .checkbox, .radio, .button, .help.
Each of them should be wrapped in a .control container
When combining several controls in a form, use the .field class as a container, to keep the spacing consistent.
Use the <label> element to associate text and <input> form control.
Using <fieldset> and <legend> ensures that the text description is read to screen reader users when the grouping is navigated to.
Fieldset and legend should only be used to associate groups of controls when a higher level description is necessary. Single checkboxes or basic radio buttons (such as male/female for gender) that make sense from their labels alone do not require fieldset and legend.