Setting the Indeterminate State of a Checkbox in Ember

Last reviewed on March 16, 2022

Below is a screenshot from Gmail. The first checkbox is in the indeterminate state because only some of the emails have been checked.

Indeterminate checkbox in Gmail

The indeterminate state can't be set via an HTML attribute. Instead, we have to set it through JavaScript:

checkboxElement.indeterminate = true;

In a feature I was recently building, I decided to use a modifier to bind the indeterminate state of a checkbox to some tracked state, as modifiers are the basic primitive for interacting with the DOM.

I named the modifier indeterminate and its usage is as follows:

<input
  type="checkbox"
  checked={{this.areAllSelected}}
  {{indeterminate this.areSomeSelected}}  {{on "click" this.toggleCheckAll}}
/>

To generate the modifier, I ran the following in Terminal:

ember g modifier indeterminate

And here is the implemenation:

app/modifiers/indeterminate.js

import { modifier } from "ember-modifier";

export default modifier(function indeterminate(checkboxElement, [value]) {
  checkboxElement.indeterminate = value;
});