Today I learnt that, as stated by the Mozilla Developer Network documentation,
"In addition to the checked and unchecked states, there is a third state a checkbox can be in: indeterminate."
In the above, a checkbox refers to the HTML element
<input type="checkbox" />.
Since I had never heard about it before in so many years of being a Web developer, I thought it deserves a bit of spotlight.
Most common use case
In a hierarchical checkboxes structure, the
indeterminate state aims at
communicating, on a parent checkbox, that sub-items/sub-options are being
Example: The grocery list
In upcoming list representations:
[ ]represents an unchecked checkbox
[-]represents an undeterminate checkbox
[x]represents a checked checkbox.
The below code block aim at representing the inital state of the list:
[ ] Fruits & veggies [ ] Apple [ ] Banana [ ] Cucumber [ ] Dairy products [ ] Butter [ ] Milk
The below code block aims at representing a new state, e.g:
- "Apple" is checked
- "Fruits & Veggies are being collected".
[-] Fruits & veggies [ ] Banana [x] Apple [ ] Cucumber [ ] Dairy products [ ] Butter [ ] Milk
In the above scenario the user checked the "Apple" item.
In order to communicate the state "Fruits & Veggies are being collected",
the "Fruits & Veggies" checkbox gets assigned an
Most browsers render this state using "a horizontal line in the box (it looks somewhat like a hyphen or minus sign) instead of a check/tick", just as we did in the above code block.
Technical details and constraints
- This can only be an enhancement, since the assignment of the
There is not such thing as an
indeterminateproperty on the
<input type="checkbox" />HTML element, in comparison to the
inputInstanceis an instance of the
- At form submission, no data is sent to represent an
indeterminatecheckbox. Indeed, it is as if checkbox was not checked.
- Screen readers may consider the
indeterminatecheckbox as not checked.
This is at least the case for Voice Over at the time of writing.
- There is an
:indeterminateCSS pseudo class that can be used to target an
However, be wary! Indeed that
:indeterminateused alone would not only match checkboxes, but could also match also
<input type="radio">elements and
You can read more about the indeterminate checkboxes on CSS Tricks where they present a bunch of implementations and also another use case: "Rotating among the states".