Implement three state checkbox using LWC

Question

I am trying to implement a tri-state checkbox using LWC input type=checkbox element and I am trying to set HTML 5 indeterminate attribute https://html.spec.whatwg.org/multipage/input.html#checkbox-state-(type%3Dcheckbox) but looks like it is not supported, should I change lightning:input to html basic input?

<lightning-input type="checkbox" variant="label-hidden" indeterminate={checkboxmodel.indeterminate} checked={checkboxmodel.checked}></lightning-input>

This page has an error. You might just need to refresh it. [Unknown public property "indeterminate" of element . This is likely a typo on the corresponding attribute "indeterminate".]

Answer 1

Indeterminate is not a content attribute, as per the documentation, it cannot be used in the component's markup

In addition to the checked and unchecked states, there is a third state a checkbox can be in: indeterminate. This is a state in which it's impossible to say whether the item is toggled on or off. This is set using the HTMLInputElement object's indeterminate property via JavaScript (it cannot be set using an HTML attribute):

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox

Answer 2

As of now, no direct attribute/property for indeterminate is available for the lightning-input component as per the component library.

There was however mention of an indeterminate state in the SLDS. However, I could not figure it out -

Here's the excerpt from the SLDS site -

As SLDS checkboxes rely on the :checked pseudo selector, and the indeterminate state is only accessible via JavaScript, the use of a CSS class on the input will be necessary to implement this in SLDS. Use JavaScript to add the class when the indeterminate property is set to true on the input.

So I ended up doing a workaround by using the simple HTML input -

<div class="slds-checkbox">
    <input type="checkbox" name="selectAllOpted" id="selectAllOpted" onchange={handleSelectAllOpted}/>
    <label class="slds-checkbox__label" for="selectAllOpted">
        <span class="slds-checkbox_faux" style="margin-right: 0.5rem;"></span>
        <span class="slds-form-element__label">Select All</span>
    </label>
</div>

Using javascript, populating/changing states -

const selectAllCheckbox = this.template.querySelector('[name="selectAllOpted"]');
selectAllCheckbox.indeterminate = !allAreOpted;