Can I put checkbox and hidden input inside a label?

user_1956082 0
Viewed 43

I have a list of possible products a user can buy. For doing it, I use ul tag combined with li. Every element has a checkbox that allows the user to choose if select the product or not.

Some products have related information. In order to describe this, I would like to store the data inside an hidden input. But because the selection and the information are related to a product I thought to use a label that contains the checkbox and the hidden input.

Something like

<label class="product">
  <input class="product-checkbox" name="product1" type="checkbox">
  <input type="hidden" name="product1-information" value="{...}" />
  <span class="product-name">Product1</span>
</label>

If I understood correctly, a label cannot refer to an hidden input but in the above example, accordingly to the w3c, the labeled control is the checkbox.

Anyway I'm wandering if a label can contains checkbox and an hidden input.

So, is the above snipper correct?

accessibility html
1 Answers

You're right on both counts. From MDN

The form control that a label is labeling is called the labeled control of the label element. Multiple labels can be associated with the same form control:

<label for="username">Enter your username:</label>
<input id="username">
<label for="username">Forgot your username?</label>

Elements that can be associated with a <label> element include <button>, <input> (except for type="hidden"), <meter>, <output>, <progress>, <select> and <textarea>.

(emphasis mine)

That makes it pretty clear to me that (a) multiple things inside a <label> block is entirely acceptable, and (b) hidden inputs will not be considered targets of the label.

user_22886590
Related