DEV Community


Discussion on: Nice Looking CSS Toggles

maxart2501 profile image
Massimo Artizzu

Be careful on nesting the <input> directly inside the <label> is NOT supported, although it is valid HTML syntax

Can you clarify this bit? I've always read different opinions on this. It's an accessibility issue, I guess?

What I know is:

  • browsers work fine with that, consistently;
  • HTML spec would disallow an element inside another if that wasn't meant to be supported;
  • some screen readers do handle that well (maybe some don't?);
  • although many suggest to use an id and a for attribute anyway.

That being said, I stopped putting <input> elements inside <label>s a while ago just to be safe, but there's still this uncertainty that bugs me.