Checkbox
Checkboxes are for selecting one or several options in a list, while radio buttons are for selecting one option from many.
<form>
<fieldset>
<legend>Select your pizza toppings</legend>
<p>Select all that apply</p>
<div class="field">
<div class="control">
<label class="checkbox">
<input type="checkbox" name="toppings" value="ham">
Ham
</label>
</div>
</div>
<div class="field">
<div class="control">
<label class="checkbox">
<input type="checkbox" name="toppings" value="pepperoni">
Pepperoni
</label>
</div>
</div>
<div class="field">
<div class="control">
<label class="checkbox">
<input type="checkbox" name="toppings" value="mushrooms">
Mushrooms
</label>
</div>
</div>
<div class="field">
<div class="control">
<label class="checkbox">
<input type="checkbox" name="toppings" value="olives">
Olives
</label>
</div>
</div>
</fieldset>
</form>Wrap the individual checkboxes with the .checkbox class for spacing.
Use checkboxes to select either on/off toggles or multiple selections.
With checkboxes make it clear with words when users can select one or multiple options.
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.