On this page

Is your site slow?

Discover performance bottlenecks to provide a better customer experience and meet your company’s revenue targets.

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 represent a state or option that can be toggled. A well-known state is called checked and unchecked. However, in addition to the checked and unchecked states, there is a third state of a checkbox: indeterminate.

See screenshot examples of visual representation of input type checkbox and indeterminate state:

Input type checkbox and indeterminate state on safari browser on Mac OS
Safari, version 15.4 (17613.1.17.1.13)), Mac OS
Indeterminate state on Ubuntu Linux, Firefox 118.0.2, Ubuntu 22.01
Ubuntu Linux, Firefox 118.0.2, Ubuntu Linux 22.10

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

What is the indeterminate property of a checkbox?

The indeterminate state of a checkbox is a state that indicates that the checkbox is neither checked nor unchecked. In most cases, it is represented by a horizontal line in the box instead of a check/tick.

What are some use cases of the indeterminate state?

This state is useful when you have a group of checkboxes and you want to indicate that some, but not all, of the checkboxes are selected. In other words, 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 indicates a mixed mode value of neither checked nor unchecked.

How do I check if a checkbox is in indeterminate state?

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.

An example of how to check if a checkbox has an indeterminate state
const htmlInputElement = document.querySelector('#myInputTypeCheckbox');

if (htmlInputElement.indeterminate) {
  // The indeterminate state is true
}

What is the indeterminate value of the checkbox?

The property indeterminate has value true or false. The indeterminate state in a checkbox refers to a third state that is neither checked nor unchecked. It is a visual representation that indicates that the checkedness of the checkbox is not determined.

There is also the :indeterminate CSS pseudo-class that targets following HTML elements and states:

  • <input type="checkbox"> elements whose indeterminate property is set to true by JavaScript.
  • <input type="radio"> elements, when all radio buttons with the same name value in the form are unchecked.
  • <progress> elements in an indeterminate state.

How do I change the indeterminate state of a checkbox?

Use property indeterminate via JavaScript on the HTMLInputElement.

An example of how to set an indeterminate state to true on the input type checkbox
const htmlInputElement = document.querySelector('#myInputTypeCheckbox');

htmlInputElement.indeterminate = true;

Notes

  • HTML cannot be used to make a checkbox indeterminate. This state can only be set by scripts.
  • Modifying the value of the indeterminate property has no effect on the value of the checked property.

Workable example

Accessibility support

Indeterminate checkboxes (live code checkbox)

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) / VOChrome / JAWS (2020)Chrome / NVDAIE 11 / JAWS (2020)Firefox / NVDASafari (iOS) / VOChrome / Talkback
Native checkbox with aria-checked=”mixed”Not exposed to apiExposed to api, announced Exposed to api, announced Not exposed to apiNot exposed to apiNot exposed to apiNot 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, announcedExposed to api, announced Not exposed to api
Indeterminate checkboxNot exposed to apiExposed to api, announcedExposed to api, announced Not exposed to apiExposed to api, announced Not exposed to apiNot exposed to api

Related posts

Comments

Leave a Reply

SiteLint Audits: Monitoring in real-time Accessibility, Performance, Privacy, Security, SEO, Runtime Errors and Console Logs