What is an indeterminate state in UX design?
An indeterminate state is the visual and semantic condition of a control that is neither fully in its checked or on state nor fully in its unchecked or off state. The most common use case is a parent checkbox in a hierarchical selection group: if some but not all child checkboxes are selected, the parent checkbox is neither fully checked nor fully unchecked. The indeterminate state communicates this mixed condition. Indeterminate states also appear in progress indicators where completion cannot be calculated, showing that a process is running without indicating how much has completed.
When should you use an indeterminate checkbox state?
Indeterminate checkboxes are appropriate in tree-structured selection interfaces where a parent item represents a group of child items that can be individually selected. When the user checks a parent checkbox in its indeterminate state, it should typically check all children. When the user unchecks it, it should typically uncheck all children. The indeterminate state itself is set programmatically when the user has made partial selections among the children: it cannot be directly set by the user clicking the checkbox, only by the application logic determining that the selection is partial. This behavior must be clearly communicated through affordance or tooltip.
How to implement indeterminate states accessibly?
The HTML checkbox element supports an indeterminate property that is set via JavaScript rather than through a checkbox attribute. CSS provides the :indeterminate pseudo-class for styling. For screen reader accessibility, the aria-checked attribute on a checkbox in an indeterminate state should be set to "mixed" rather than "true" or "false", which causes screen readers to announce the mixed state explicitly. The visual treatment of the indeterminate state should be clearly distinct from both the checked and unchecked states, typically using a horizontal dash or minus sign inside the checkbox square rather than a checkmark or an empty box.