<label> with embedded inputs problematic (should behave like <label for=x>) about 7.css

[ugumba]

Thanks for replying.
I've created a radio button component which generates an UUID id and an associated <label for="">.
For the other <label>s, this is sufficient for now:
label { display:block; /* fixes padding between label text and child elements */ }

[khang-nd]

Hello, thanks for raising the concern. Because we are limiting the styling to semantic tags as much as possible, it is why we have to follow this pattern for the inputs.

If we were to support <label><input /></label>, we had to style all of the labels, which would introduce the collision with other labels that hold no input, and we have no possibility from CSS to select from input to the parent label. One workaround is adding a class to the label, but then it doesn't solve your concern about bloating the HTML.