Checkboxes: Design Guidelines

Mikes Notes

Some design guidelines on checkboxes.

Resources

• https://en.wikipedia.org/wiki/Checkbox
• https://www.nngroup.com/articles/checkboxes-design-guidelines/
• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input/checkbox

"A checkbox (check box, tickbox, tick box) is a graphical widget that allows the user to make a binary choice, i.e. a choice between one of two possible mutually exclusive options. For example, the user may have to answer 'yes' (checked) or 'no' (not checked) on a simple yes/no question.

Checkboxes are shown as empty boxes when unchecked, and with a tick or cross inside (depending on the graphical user interface) when checked. A caption describing the meaning of the checkbox is normally shown adjacent to the checkbox. Inverting the state of a checkbox is done by clicking the mouse on the box, or the caption, or by using a keyboard shortcut, such as the space bar.

Often, a series of checkboxes is presented, each with a binary choice between two options. The user may then select several of the choices. This is contrasted with the radio button, in which only a single option is selectable from several mutually-exclusive choices.

Checkboxes may be disabled (indicated "greyed out") to inform the user of their existence and possible use despite momentary unavailability." - Wikipedia

Code

<fieldset>
  <legend>Choose your monster's features:</legend>

  <div>
    <input type="checkbox" id="scales" name="scales" checked />
    <label for="scales">Scales</label>
  </div>

  <div>
    <input type="checkbox" id="horns" name="horns" />
    <label for="horns">Horns</label>
  </div>
</fieldset>