Why do radio buttons use <label>?

Why do radio buttons use <label>?
0

#1

In the previously challenge I used <input type="text" placeholder="cat photo URL" required> to create a text input field. Now I’am creating radio buttons with <label><input type="radio" name="indoor-outdoor">Indoor</label>.

Why do we use label for radio buttons but not for text input?


#2

It might be a good idea to use a label for a text input, but by using the placeholder it is already clear what you have to type in. The radio button needs some text to describe what it is that you select.

Also, clicking the label selects that radio button. So it is easier for people to select the correct radio button (especially on mobile).


#3

Makes sense, the input tag is self closing and it doesn’t add text so we label to do that. Wasn’t aware label also enable users to click on the text, that’s good to know.


#4

You should label all your form components appropriately for accessibility purposes.

This does not have to be an explicit <label> though, as you can use the aria-label attribute, too.

https://www.w3.org/WAI/tutorials/forms/labels/