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.

This example also demonstrates use of fieldset and Legend elements for labeling the checkbox group.

Similar examples include:

Checkbox (Two State): Simple two state checkbox.

Example

Sandwich Condiments

All condiments

Lettuce
Tomato
Mustard
Sprouts

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.

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

CSS: checkbox.css
Javascript: checkboxMixed.js
Javascript: controlledCheckbox.js

HTML Source Code


  <fieldset>
    <legend>
      Sandwich Condiments
    </legend>
    <div role="checkbox"
       class="group_checkbox"
       aria-checked="mixed"
       aria-controls="cond1 cond2 cond3 cond4"
       tabindex="0">
      
                    All condiments
                
    </div>
    <ul class="checkboxes">
      <li>
        <label>
          <input type="checkbox" id="cond1">
          Lettuce
        </label>
      </li>
      <li>
        <label>
          <input type="checkbox"
               id="cond2"
               checked="">
          Tomato
        </label>
      </li>
      <li>
        <label>
          <input type="checkbox" id="cond3">
          Mustard
        </label>
      </li>
      <li>
        <label>
          <input type="checkbox" id="cond4">
          Sprouts
        </label>
      </li>
    </ul>
  </fieldset>
  <script type="text/javascript">
    
            function checkboxFocus (event) {
              event.currentTarget.parentNode.classList.add('focus');
            };
            function checkboxBlur (event) {
              event.currentTarget.parentNode.classList.remove('focus');
            };
            window.onload = function () {
              var i;
              var mixed = document.querySelectorAll('[role="checkbox"]');
              for (i = 0; i < mixed.length; i++) {
                var m = new CheckboxMixed(mixed[i]);
                m.init();
              }
              var checkboxes = document.querySelectorAll('input[type="checkbox"]');
              for (i = 0; i < checkboxes.length; i++) {
                var cb = checkboxes[i];
                cb.addEventListener('focus', checkboxFocus);
                cb.addEventListener('blur', checkboxBlur);
              }
            };
          
  </script>