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 stateYou 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 |