feature(checkbox): support proper indeterminate state

[lrstanley]

Description

Right now, it's only possible to have checkboxes be in an indeterminate state as its initial state, and not be able to go back to that state after it has moved away from that state. My use case is a checkbox that is used to control a query parameter for filtering results.

• Indeterminate state: public = <true|false> results are included. and when the checkbox is false, it filters that public field by the value of the checkbox. Effectively, *, true, and false states.

Doesn't look as though this is possible today, with checkboxes, or with Switch.

I have attempted to re-set the value to indeterminate, however, it looks as though the Checkbox ignores this state change.

Additional context

No response

[benjamincanac]

I haven't been able to reproduce this, tried adding a select in the playground to change the bound value and it works as planned:

<USelect v-model="checked" :items="[true, false, 'indeterminate']" />
<UCheckbox v-model="checked" />

Please fill up a bug report with a reproduction next time!

[lrstanley]

@benjamincanac looks like in the playground, you are correct in that you can manually set the state back to indeterminate, but you still cannot change the state back to indeterminate with the checkbox itself, which was the reason for the feature request. Does this still not make sense as a feature request?

[benjamincanac]

Oh you mean through the UI? You can take a look at this Table example to see how its done: https://ui.nuxt.com/components/table#with-row-selection

[lrstanley]

Oh you mean through the UI? You can take a look at this Table example to see how its done: ui.nuxt.com/components/table#with-row-selection

That is still not through the UI via the checkbox itself. That is through another event (and thus js/ts/etc, which technically could be trigger by something in the UI), which sets the state of the checkbox, which isn't quite the same. I'd like to toggle through all three states, just by clicking on the checkbox itself.

[benjamincanac]

You might be able to achieve this manually by listening to the @update:model-value event and programatically change the value to indeterminate when it's already checked.

However, I don't think the indeterminate state should be used like that, it's only a visual change as you can read on https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes