Checkboxes

A checkbox is a graphical control element that presents a binary choice: checked or unchecked. It is represented by a small square that can display a checkmark or remain empty. Some implementations support an indeterminate state, used to indicate a mixed or unknown value.

Checkboxes are widely used in forms and interfaces to collect boolean data or multiple independent options. Unlike radio buttons, each checkbox operates independently; users can select any number of options, including none.

States and behavior: In many systems, a checkbox has two states: checked and unchecked. A tri-state checkbox adds an indeterminate state, often used to reflect partial selection in hierarchical lists. In web browsers, the indeterminate state is visual only and is not submitted with forms unless the checked value is true.

Implementation: In HTML, the input element with type checkbox is used. When checked, the name/value pair is submitted; when unchecked, the field is typically omitted. The checked attribute sets the initial state. JavaScript can read and set the checked or indeterminate properties.

Accessibility: Proper labeling is essential; each checkbox should be associated with a label to ensure screen readers announce its purpose. Keyboard users toggle with the Space key. Indeterminate state should be conveyed to assistive technologies, using aria-checked="mixed" or similar semantics.

Design considerations: Use concise labels, group related options, provide a clear default, and ensure visual contrast. Avoid using checkboxes for mutually exclusive choices; use radio buttons for that. Consider disabled states and clear focus indicators.