Checkbox indeterminate status

[fava2020]

Hi everyone, I have a problem with the sl-change event on sl-checkbox component, I needed to change it without checked status, is it possible?

I saw in the sl-checkbox code and his handleClick event has

this.checked = !this.checked;

is it possible to overwrite all the lines and only emit my own event?

I tried to change it on my sl-change event, however it is not working 🫤, could someone has any previous experience on it or has a comment?

Thank you ☺️

[claviska]

I'm not sure exactly what you're asking. You can programmatically alter the checkbox's checked state without triggering an event.

<sl-checkbox>Checkbox</sl-checkbox>

<br><br>

<sl-button>Toggle without event</sl-button>
<script>
  const checkbox = document.querySelector('sl-checkbox');
  const button = document.querySelector('sl-button');

  // Only logs when toggling the checkbox (not the button)
  checkbox.addEventListener('sl-input', () => console.log('checked'));

  button.addEventListener('click', () => {
    checkbox.checked = !checkbox.checked;
  });
</script>

If you're trying to stop sl-input and/or similar events from emitting, you'll need to capture them, e.g.:

checkbox.addEventListener('sl-input', event => {
  event. stopImmediatePropagation();
});

[fava2020]

Hi @claviska, sorry for my bad explanation, however I understood your explanation, I will try it.

Thank you ☺️