Definitive guide to indeterminate state of a checkbox

    What are the three states of checkbox?

    <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 a checkbox can be in: 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

    Leave a Reply