[Feature Request][checkbox] Add indeterminate state

[MatthieuLebigre]

Hello !

We could add the indeterminate state to the checkbox (used often to summarize a list of mixed choices).

It's well defined here : https://www.w3.org/TR/wai-aria-practices-1.1/examples/checkbox/checkbox-2/checkbox-2.html

[gerjanvangeest]

Yes, it's also on our wishlist, but so far haven't found the time yet to implement. Feel free to contribute it.

Looking at the example I guess that the indeterminate state should be added to an extended version of the checkbox-group.

[MatthieuLebigre]

I'll try to find some time to do it. What do you mean by an extended version of the checkbox-group ? Like a new component that extends checkbox-group and include the indeterminate state logic ?

[gerjanvangeest]

Yes exactly. So you get:

<lion-checkbox-group
  name="sandwich[]"
  label="Sandwich Condiments"
>
  <lion-checkbox-indeterminate label="All condiments">
    <lion-checkbox label="Lettuce" .choiceValue=${'Lettuce'}></lion-checkbox>
    <lion-checkbox label="Tomato" .choiceValue=${'Tomato'}></lion-checkbox>
    <lion-checkbox label="Mustard" .choiceValue=${'Mustard'}></lion-checkbox>
    <lion-checkbox label="Sprouts" .choiceValue=${'Sprouts'}></lion-checkbox>
  </lion-checkbox-indeterminate>
</lion-checkbox-group>

[jorenbroekema]

It's a little tougher though right?

It's an extension of checkbox-group because it can have child checkboxes, and its state depends on those children.
It's an extension of checkbox because it renders as a lightDOM child.

Requirements

• A checkbox that can be indeterminate, needs to have knowledge of child checkboxes
• indeterminate prop is set to the if more than 1 and less than all child checkboxes are checked, otherwise unset
• checked is set if all child checkboxes are checked
• checked is unset if not all child checkboxes are checked
• On toggle, set or unset all children checkboxes checked

Questions

• Is it merely an interactive UI control for the child checkboxes, doesn't have any form control specific things?
• Does this checkbox-indeterminate have its own choiceValue?
• Does this checkbox-indeterminate have its own modelValue / serializedValue? Does it make sense? Does it represent its children or its own state? If I read WAI ARIA, checkboxes that are indeterminate are not submitted, so probably not?

Resources:

• https://www.w3.org/TR/wai-aria-practices-1.1/examples/checkbox/checkbox-2/checkbox-2.html
• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#Indeterminate_state_checkboxes
• https://css-tricks.com/indeterminate-checkboxes/

My opinion:

This checkbox-indeterminate should not extend from checkbox or checkbox-group, because it is not a form field, it's only a "state controller & visualizer wrapper" for child checkboxes, so no need to get all the stuff like FormControlMixin, FormatMixin, InteractionStateMixin, ValidateMixin, FormRegistering/Registrar stuff... etc.

Extend LitElement LionCheckbox, apply SlotMixin and spawn <input type="checkbox"> similar to lion-checkbox, and then add custom behaviour to check for children, set its own indeterminate state & checked state by catching the model-value-changed events bubbling up from the child checkboxes. Add an event listener to ensure that if the user toggles, the child checkboxes are all checked or unchecked.

Implementation detail suggestion: the checkbox-indeterminate could look for a parent checkbox-group and use checkboxGroup.formElements to access and modify the checkbox children? So then it would be a hard requirement for the checkbox-indeterminate to be a direct child of a checkbox-group. Probably this is easiest and clearest

[jorenbroekema]

I created a draft PR here with a proof of concept, that will make it easier to discuss perhaps: #1134

I noticed that not extending any field related stuff made things harder, because you miss things like label, help-text, input events being proxied from the native input node to the webcomponent, and the list was pretty long. So I did end up extending LionCheckbox. But good to note is that now the indeterminate checkbox is an actual field, and is included in the serializedValue/modelValue of its parent checkbox-group

One difference you may notice is that I did not nest the checkboxes inside the indeterminate checkbox. That's becauses I couldn't really get things to work quickly. If I made it a sibling, I could make it work pretty fast without too much code, but styling them with indentation might be harder now because they are not nested in DOM..

Let me know what you guys think..

@tlouisse tagging you as well :)

[MatthieuLebigre]

I guess the discussion should be marked as answered, thanks to #1154 ?