Toggle in Vue doesn't render correctly

[robinzimmermann]

When I click on a toggle in my Vue application, it turns filled in, like this:

Before I click it, it looks correct. If I tab out of the field (or click somewhere else) then it updates and renders correctly.

Functionally the toggle behaves correctly. Even when it's filled in I can keep clicking it and it behaves correctly. It just looks like the rending during the transition is not behaving correctly.

In my Vue template I have:

<input v-model="isSearchInHeaderChecked" type="checkbox" class="toggle" />

isSearchInHeaderChecked is:

const isSearchInHeaderChecked = computed({
  get: () => {
    if (localSearch.value.sid) {
      return prefsStore.isSearchInSearchesInHeader(localSearch.value.sid);
    } else {
      return false;
    }
  },
  set: value => {
    if (localSearch.value.sid) {
      if (value) {
        prefsStore.addToSearchesInHeader(localSearch.value.sid); // Add if checked
      } else {
        prefsStore.removeFromSearchesInHeader(localSearch.value.sid); // Remove if unchecked
      }
    }
  },
});

(localSearch.value.sid has a value, in this context.)

I'm looking for any clues about what I might be doing wrong to cause this?

If I change class="toggle" to class="checkbox" then it works perfectly.

[saadeghi]

Probably you're using @tailwindcss/forms (or another style or plugin) that is affecting form elements.
daisyUI applies styles to class names but @tailwindcss/forms by default, applies styles to ALL form elements.
If you really need @tailwindcss/forms alongside with daisyUI (which I doubt, because both are doing the same job) consider using its strategy: 'class' config so it only applies style to the elements with specific class name (not all form elements)