Checkboxes: Design Guidelines

Mike's 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

References

• Reference

Repository

• Home > Ajabbi Research > Library >
• Home > Handbook > 

Last Updated

17/05/2025

Checkboxes: Design Guidelines

By: 

Wikipedia: 2024

"A checkbox (check box,  tick box) is a graphical widget that allows the user to make a binary choice, i.e. a choice between two 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 checkbox's meaning 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.

A series of checkboxes is often 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>