Move input inside labels in radios and checkboxes

[gustavoguichard]

It is a common practice to use this structure for radios and inputs:

<label>
  <input type="checkbox" />
  Check it out
</label>

Alternatively, you can nest the input directly inside the label, in which case the for and id attributes are not needed because the association is implicit

Source: MDN

It also gives another benefit:

Clicking in areas in between the checkbox and the label will work to toggle the input.
If you try to do it now in the site examples you'll see there are some blind areas.

Another tip since we are talking about it. I usually add this line to my CSS:

label[for], li:has(> input)  {
  cursor: pointer;
}

Therefore the cursor will be already suggesting a click whenever you use either approach:

<label><input /></label>

<!-- or -->

<label for="foo" /><input id="foo" />