Indeterminate checkboxes aren't reflected visually

[adamsilver]

There's a rare-ish state on checkboxes known as indeterminate.

As the GOV.UK checkboxes are custom when this state is true, the state is not reflected visually.

I've only seen this in use for (de)select all checkboxes used as a makeshift button to select all items, usually in a table. That's what we, at MOJ, are using it for.

Further reading:
https://css-tricks.com/indeterminate-checkboxes/

[NickColley]

Heya Adam,

I prototyped this in the backlog thread here: alphagov/govuk-design-system-backlog#37 (comment)

The prototype code looks like:

.govuk-checkboxes__input:indeterminate + .govuk-checkboxes__label::after {
  transform: rotate(0);
  border: none;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 6px;
  width: 22px;
  background: currentColor;
  opacity: 1;
}

Note, you'd want to make sure small checkboxes work too.

[NickColley]

@adamsilver just for context in your service did you think about these things?

• this is a JavaScript only behaviour, so we'd have to be OK with this.
• does the indeterminate option include semantics that are announced to assistive technologies?

[36degrees]

If you build off that code, worth testing whether that works in high-contrast mode / browsers with custom colours. I believe we always use borders rather than backgrounds for the parts of the control to make sure they're still visible in those cases (for example, the circle in the middle of a radio button is 0 x 0 and entirely border)

[joelanman]

@adamsilver could you talk through your use case a bit more, and is there any user research on this you could add?

[adamsilver]

You 3 are on fire in response times—thank you! This isn't even urgent :)

@NickColley...

Thanks for the code. That's a helpful starting point. I'm not sure the CSS :indeterminate is that well supported/aligns with the JavaScript enhancement. That is, that I imagine there will be browsers where the enhanced styling of the checkboxes is applied but indeterminate styles won't be reflected. I could be wrong though.

The select all feature we're working on only works with JavaScript. Without JavaScript users are currently left to select items one by one although we could provide a more comparable experience by letting users do this with a server side round trip.

AT wise—I haven't done any broad testing. A quick test just now with Voiceover announces an indeterminate checkbox as “mixed”.

@joelanman...

Yes. We have a table. Each row in the tbody can be selected. To let users select all, we have some JavaScript that injects a checkbox in the thead th in the same column. Like Gmail. I don't have any research to hand on this exactly but it's a pretty conventional pattern.

I will add, that using a checkbox could be problematic, because this sort of behaviour should be triggered by a <button> because checkboxes are for input. But conventionally speaking, and in the case of a table (again like Gmail), it seems right, at least visually to make it look like a checkbox.

I wouldn't say this is particularly urgent. We've decided not to use the indeterminate state, at least for now.

[NickColley]

Thanks for letting us know about this Adam, since it's not blocking you we're going to close this for now, but if someone else needs this in the future we'll re-open this and consider adding this again. 👍