On this page
  1. What is the indeterminate property of a checkbox?
  2. What is a mixed checkbox?
  3. How do I change the indeterminate state of a checkbox?
  4. Accessibility support
    1. Indeterminate checkboxes
  5. Results
3 checkboxes with following states: unchecked, indeterminate, checked

Definitive guide to indeterminate state of a checkbox

Learn more about the indeterminate state of a checkbox and how your users can benefit from it.

<input> elements of type checkbox represents a state or option that can be toggled. A well known states are called checked and unchecked. However, in addition to the checked and unchecked states, there is a third state of a checkbox: indeterminate. In most cases, it is represented by a horizontal line in the box instead of a check/tick.

See screenshot example from the browser Safari (version 15.4 (17613.1.17.1.13)) on Mac OS:

Input type checkbox and indeterminate state on safari browser mac os
Visual representation of input type checkbox and indeterminate state

You can also see a code example of a checkbox with a mixed-state.

What is the indeterminate property of a checkbox?

indeterminate property of a checkbox represent a state between checked and unchecked.

The most common usage indeterminate property is to indicate if all of the sub-options are checked or unchecked. See visual example:

What is a mixed checkbox?

A mixed checkbox is an element <input type="checkbox"> or any element with defined role="menuitemcheckbox" only that has defined aria-checked="mixed" and it is an equivalent to indeterminate state that indicating a mixed mode value of neither checked nor unchecked.

How do I change the indeterminate state of a checkbox?

There is no attribute indeterminate and the only way to set this state is to do that via JavaScript using the HTMLInputElement object’s indeterminate property.

input.indeterminate = true;

Accessibility support

Indeterminate checkboxes

Testing aria-checked="mixed" on a native checkbox.

Testing aria-checked="mixed" on a faux checkbox.

Testing indeterminate property on a native checkbox.

Results

All browsers latest version as of 10/03/2021.

Safari (Mac OS) / VO Chrome / JAWS (2020) Chrome / NVDA IE 11 / JAWS (2020) Firefox / NVDA Safari (iOS) / VO Chrome / Talkback
Native checkbox with aria-checked=”mixed” Not exposed to api Exposed to api, announced Exposed to api, announced Not exposed to api Not exposed to api Not exposed to api Not exposed to api
Faux checkbox with aria-checked=”mixed” Exposed to api, announced Exposed to api, announced Exposed to api, announced Exposed to api, announced Exposed to api, announced Exposed to api, announced Not exposed to api
Indeterminate checkbox Not exposed to api Exposed to api, announced Exposed to api, announced Not exposed to api Exposed to api, announced Not exposed to api Not exposed to api

Related posts

Leave a Reply