Components menu
Checkboxes
The checkbox component allows users to pick the option or options they want from a list, by checking one or more boxes, unlike radio buttons which allow users to pick only one option.
Default styling
Form caption
Floodline styling
Form caption
HTML
<div class="form--caption-heading"> Form caption </div>
<div class="form-group mb-3 mt-3">
<label class="form-label"> Form group label </label>
<div class="form-check mb-3">
<input class="form-checkbox--input form-check-input" type="checkbox" value="" id="CheckDefault">
<label class="form-checkbox--label" for="CheckDefault"> Default checkbox </label>
</div>
<div class="form-check mb-3">
<input class="form-checkbox--input form-check-input" type="checkbox" value="" id="CheckChecked" checked>
<label class="form-checkbox--label" for="CheckChecked"> Checked checkbox </label>
</div>
<div class="form-check mb-3">
<input class="form-checkbox--input-floodline form-check-input" type="checkbox" value="" id="CheckDefault2">
<label class="form-checkbox--label" for="CheckDefault2"> Default Floodline checkbox </label>
</div>
<div class="form-check mb-3">
<input class="form-checkbox--input-floodline form-check-input" type="checkbox" value="" id="CheckChecked2" checked>
<label class="form-checkbox--label" for="CheckChecked2"> Checked Floodline checkbox </label>
</div>
</div>
CSS
/* Checkboxes
------------------------------------ */
.form-checkbox--input, .form-checkbox--input-floodline {
height: 30px;
width: 30px;
position: absolute;
}
.form-checkbox--label {
display: inline-block;
padding: 6px 10px 0px 45px;
}
.form-checkbox--input:checked, .form-checkbox--input-floodline:checked {
background-color: var(--scottish-dark-teal);
border-color: var(--grey-one);
}
.form-checkbox--input:focus {
border-color: #000000;
outline: 4px solid var(--verdant-green);
outline-offset: 0;
}
.form-checkbox--input-floodline:focus {
border-color: #000000;
outline: 4px solid var(--yellow);
outline-offset: 0;
}