Checkbox

A checkbox is an input option that represents a setting or value with an on, off, or mixed choice. A check mark within the checkbox indicates that the setting is selected or checked.

Checkboxes in a group are non-exclusive options; more than one checkbox in a group can be checked at any given time.

Keyboard Interaction

When focus is on a checkbox, the Spacebar key toggles the selection, checking or unchecking the box.

Mouse Interaction

Clicking on a checkbox with the primary mouse button toggles its selection.

Styling

Checkboxes are typically represented as squares with a check mark inside when checked.
If the checkbox is in an indetermined state, its appearance will resemble a disabled state.

ARIA Roles and Properties

A two-state checkbox uses the role checkbox.
A checkbox that also supports a mixed state uses the role checkboxtristate.
Checkboxes can have these states:
- Checked - aaa:checked="true"
- Unchecked - aaa:checked="false"
- Mixed or tristate - aaa:checked="mixed"
They may have the properties aaa:describedby and aaa:labeledby; see ARIA Relationships.

See also the tristate example in the Roles document.

Example

Checkbox with title for accessible name