Checkbox-Component always requires a surrounding label-Tag to work

[ico85]

🐛 Bug report

I'm noticing that the Checkbox component currently requires a wrapping <label> element to toggle its checked state. Because the checkbox itself is visually hidden by api.getHiddenInputProps(), it's not clickable on its own. This feels too restrictive, as it's perfectly valid in HTML to place the label elsewhere—as long as the for and id attributes match.

💥 Steps to reproduce

1. Use <input v-bind="api.getHiddenInputProps()" /> outside of a <label>.
2. Try to toggle the checkbox; it won’t work.

You can see in the [demo](https://zagjs.com/components/vue/checkbox) that a wrapping <label> is always used.

🧐 Expected behavior

• It should be possible to use the input without a surrounding <label>.
• As long as for and id match, the checkbox should be clickable, even if the label is placed elsewhere.
• Ideally, the API should provide props for a visible, clickable input (in addition to the hidden one), or allow flexibility in how the label is handled.

Versions:

• @zag-js/checkbox: ^0.82.1
• @zag-js/vue: ^0.82.1

Environment:

• Browser: Chrome 132.0.6834.160
• Operating System: macOS 14.3.1 (23D60)

Thank you for looking into this issue!

[segunadebayo]

This is a design decision. I don't see how this restricts your work.

Please share more details on what you're trying to achieve.