NcCheckboxRadioSwitch: Allow external label

[hschletz]

I have a NcCheckboxRadioSwitch wrapped in an external label:

<label>
    <span>label</span>
    <NcCheckboxRadioSwitch type="switch" :checked.sync="value" />
</label>

This broke after a recent update. Clicking the switch has no effect. Clicking the label still toggles the switch.

I can work around the issue by using an id attribute:

<label :for="id">label</label>
<NcCheckboxRadioSwitch type="switch" :checked.sync="value" :id="id" />

but I'd rather prefer avoiding the hassle of generating unique ids for every form element.

[ShGKme]

It is supposed to be used as

<NcCheckboxRadioSwitch type="switch" :checked.sync="value">
  label
</NcCheckboxRadioSwitch>

Then it has common styles, focus effect, etc.

What is the use case to have the label outside the component?

[hschletz]

I'm using the component as part of a large form with a custom layout (a grid with labels on the left and elements on the right). The default label placement, both by NcCheckboxRadioSwitch as well as other components like NcInputField, would not be suitable for this form. NcInputField and NcSelect support this via the labelOutside prop.

BTW, these components have the label provided as a prop, not as content. Wouldn't it be better to be consistent here?

[susnux]

While I agree that using the default slot for restricted content (text) is not good and would better fit in a label prop, I think in this case the idea was to have consistent styling across the components.