Checkbox
Checkboxes are used when multiple items can be selected in a list. Users can select zero, one, or several items. Checkboxes work independently from each other; checking one box does not affect any other selections. A standalone checkbox may be used for a single option that the user can turn on or off.
Overview
Keyboard interactions
Each checkbox can be reached by Tab and selected with Space independently. This matches the established HTML interaction pattern.
Design recommendations
Meaningful order
Checkboxes can appear in multiple columns. If there is a meaningful order to the items (such as days of the week), annotate whether the tab order is by row or by column.
Development considerations
Use a fieldset and legend for a checkbox group. Surround a related set of checkboxes with a <fieldset>. The <legend> provides context for the grouping. Don’t use fieldset and legend for a single check.
Use semantic tags. Each input should have a semantic tag for the id attribute, and its corresponding label should have the same value in its for attribute.