[Question] How to trigger Checkbox component error state

[VietNguyenQuoc]

From the Checkbox spec, I see that Checkbox has error state.
However from the web component implementation, I don't see any attributes or methods to change the component to this state.

Please help to shed some light on this. Thanks.

[asyncLiz]

We removed the error state from checkbox in 1.0.0-pre.15 since design was still exploring an error checkbox state and did not finalize guidelines of when or how to use it.

Since we didn't have a clear signal (and because similar components like switch/radio don't have error states), we removed it to reduce our API support.

You can theme a checkbox with the error system color and add aria-invalid to make an error checkbox.

<style>
  :root {
    --md-sys-color-error: red;
  }
  md-checkbox.error {
    --md-sys-color-primary: var(--md-sys-color-error);
    --md-checkbox-outline-color: var(--md-sys-color-error);
    --md-checkbox-hover-outline-color: var(--md-sys-color-error);
    --md-checkbox-focus-outline-color: var(--md-sys-color-error);
    --md-checkbox-pressed-outline-color: var(--md-sys-color-error);
  }
</style>
<md-checkbox class="error" aria-invalid="true"></md-checkbox>

https://jsbin.com/pukavepaca/edit?html,output

[VietNguyenQuoc]

Thanks @asyncLiz for clarifying!