Checkbox label not clickable if name is not provided

[jerefrer]

Current Behavior

Omitting the name attribute when using <Checkbox> will result in the label next to the checkbox not toggling the value as one would expect.

Because there isn't any error message except the warning in the console telling me that "name" is missing, it took me quite a while to understand that one was linked to the other.

Expected Behavior

Maybe when omitting the name it could be auto-generated with a uuid or just a counter.

It seems to me that when using Svelte an input's name has very little relevance in most cases. What I like about Svelte is that it is very concise, so if I have to specify the name I expect that it must mean something in terms of my app's domain logic.

Steps To Reproduce

1. Use the component with a label, omitting to provide the name attribute

   let checked = false;
   <Checkbox bind:checked={checked }>
   <Checkbox.Label slot="label">Checked</Checkbox.Label>
   </Checkbox>

2. Click on the label next to the checkbox
3. Notice that the checkbox doesn't get toggled. Nothing happens.

Link to Reproduction / Stackblitz

No response

More Information

No response

[N00nDay]

The issue with this is that based on the structure the for property of the label needs to be linked to the id property of the input field and this is all directly tied to the name property provided to the Checkbox component. This just comes back to how html works unfortunately. As for generating an id and for property, if the name property is omitted I can auto generate this utilizing the nanoid package. If this is going to happen it should be expanded to all form elements not just the Checkbox in my opinion.

[jerefrer]

Indeed it's tied to basic HTML (as I remember from my days working with Rails :) but that doesn't mean this "implementation detail" should not be hidden from the developer. So auto-filling of the name attribute would make a lot of sense and doesn't seem to have any drawback as far as I know.

Thank you for mentioning nanoid, I've just switched to it instead of uuid in my current project :)

[N00nDay]

• Autocomplete
• Checkbox
• Currency
• DatePicker
• FilePicker
• Input
• InputNumber
• Radio
• Rating
• Select
• Toggle

[jerefrer]

🎉 Thank you so much :)