Checkbox
Examples
Checkbox
<div class="ys-checkbox">
<input type="checkbox" id="id-of-element-0"
class="ys-checkbox__control ys-u-visuallyhidden" />
<label for="id-of-element-0" class="ys-checkbox__label">Checkbox label</label>
</div>
Checkbox on dark background
<div class="ys-checkbox ys-checkbox--light">
<input type="checkbox" id="id-of-element-1"
class="ys-checkbox__control ys-u-visuallyhidden" />
<label for="id-of-element-1" class="ys-checkbox__label">Checkbox label</label>
</div>
Disabled checkbox
<div class="ys-checkbox">
<input type="checkbox" disabled id="id-of-element-2"
class="ys-checkbox__control ys-u-visuallyhidden" />
<label for="id-of-element-2" class="ys-checkbox__label">Checkbox label</label>
</div>
Disabled checkbox on dark background
<div class="ys-checkbox ys-checkbox--light">
<input type="checkbox" disabled id="id-of-element-3"
class="ys-checkbox__control ys-u-visuallyhidden" />
<label for="id-of-element-3" class="ys-checkbox__label">Checkbox label</label>
</div>
HTML Guidelines
UX and Design Guidelines
Checkboxes are used when there are lists of options and the user may select any number of choices, including zero, one, or several. In other words, each checkbox is independent of all other checkboxes in the list, so checking one box doesn’t uncheck the others. A stand-alone checkbox is used for a single option that the user can turn on or off. (source: Checkboxes vs. Radio Buttons)
Checkboxes must never be distributed horizontally at it makes it harder to:
- scan the options
- distinguish which checkbox a label is associated with