Checkbox Example (Mixed-State)

This example demonstrates using the Checkbox Design Pattern to create a tri-state, or mixed-state, checkbox. In this implementation, the mixed-state checkbox represents the state of a set of standard HTML checkboxes. If none of the checkboxes in the set are checked, the mixed state checkbox is not checked, and if all members of the set are checked, the mixed state checkbox is checked. If the set contains both some checked and unchecked checkboxes, the mixed state checkbox is partially checked. Activating the tri-state checkbox changes the states of the checkboxes in the set.

Similar examples include:

Example

Sandwich Condiments

Accessibility Features

Keyboard Support

Key Function
Tab Moves keyboard focus among the checkboxes.
Space
  • Cycles the tri-state checkbox among unchecked, mixed, and checked states.
  • When the tri-state checkbox is unchecked, all the controlled checkboxes are unchecked.
  • When the tri-state checkbox is mixed, the controlled checkboxes return to the last combination of states they had when the tri-state checkbox was last mixed or to the default combination of states they had when the page loaded.
  • When the tri-state checkbox is checked, all the controlled checkboxes are checked.

Role, Property, State, and Tabindex Attributes

Role Attribute Element Usage
checkbox div
  • Identifies the div element as a checkbox.
  • The child text content of this div provides the accessible name of the checkbox.
tabindex="0" div Includes the checkbox in the page tab sequence.
aria-controls="[IDREFS]" div identifies the set of checkboxes controlled by the mixed checkbox.
aria-checked="false" div
  • Indicates the tri-state checkbox is not checked.
  • In this state, all controlled checkboxes are unchecked.
  • CSS attribute selectors (e.g. [aria-checked="false"]) are used to synchronize the visual states with the value of the aria-checked attribute.
  • To support operating system and browser high contrast settings, the CSS ::before pseudo element and content property are used to generate the visual indicators of the checkbox state.
aria-checked="true" div
  • Indicates the tri-state checkbox is checked.
  • In this state, all controlled checkboxes are checked.
  • CSS attribute selectors (e.g. [aria-checked="true"]) are used to synchronize the visual states with the value of the aria-checked attribute.
  • To support operating system and browser high contrast settings, the CSS ::before pseudo element and content property are used to generate the visual indicators of the checkbox state.
aria-checked="mixed" div
  • Indicates the tri-state checkbox is mixed.
  • In this state, some controlled checkboxes are unchecked and some are checked.
  • CSS attribute selectors (e.g. [aria-checked="mixed"]) are used to synchronize the visual states with the value of the aria-checked attribute.
  • To support operating system and browser high contrast settings, the CSS ::before pseudo element and content property are used to generate the visual indicators of the checkbox state.

Javascript and CSS Source Code

HTML Source Code