El elemento “label” puede contener como máximo un descendiente “button”, “input”, “meter”, “output”, “progress”, “select”, o “textarea”.

La especificación HTML define el elemento <label> como un título para un único control de formulario. Cuando colocas múltiples elementos etiquetables dentro de un <label>, el navegador no puede determinar con qué control está asociado el texto de la etiqueta. Esto crea ambigüedad para las tecnologías asistivas como los lectores de pantalla, que dependen de una relación clara uno a uno entre las etiquetas y sus controles para anunciar los campos de formulario correctamente. También rompe el comportamiento de clic para enfocar — hacer clic en el texto de la etiqueta debería enfocar o activar el control asociado, pero con múltiples controles anidados dentro, el objetivo previsto no está claro.

Los elementos etiquetables son específicamente: <button>, <input> (excepto type="hidden"), <meter>, <output>, <progress>, <select>, y <textarea>. Si cualquier combinación de dos o más de estos aparece como descendientes de un único <label>, el validador marcará el error.

Un escenario común que desencadena esto es cuando los desarrolladores intentan agrupar campos relacionados — como un nombre y un apellido — dentro de una etiqueta, o cuando anidan un botón junto con un input dentro de una etiqueta por conveniencia de estilos.

Cómo solucionarlo

1. Usa un <label> por control. Envuelve cada elemento etiquetable en su propio <label>, o usa el atributo for para asociar un <label> con el id de un control específico.
2. Usa un elemento contenedor para agrupar. Si necesitas agrupar visualmente controles relacionados, usa un <fieldset> con un <legend> en lugar de un único <label>.

Ejemplos

❌ Incorrecto: Dos inputs dentro de una etiqueta

<label>
  Name
  <input type="text" name="first" placeholder="First">
  <input type="text" name="last" placeholder="Last">
</label>

Esto es inválido porque el <label> contiene dos descendientes <input>.

✅ Corregido: Etiquetas separadas para cada input

<label for="first">First name</label>
<input type="text" id="first" name="first">

<label for="last">Last name</label>
<input type="text" id="last" name="last">

✅ Corregido: Usando un fieldset para agrupar controles relacionados

<fieldset>
  <legend>Name</legend>
  <label>
    First
    <input type="text" name="first">
  </label>
  <label>
    Last
    <input type="text" name="last">
  </label>
</fieldset>

❌ Incorrecto: Un select y un botón dentro de una etiqueta

<label>
  Pick your age
  <select name="age">
    <option>Young</option>
    <option>Old</option>
  </select>
  <button type="button">Help</button>
</label>

✅ Corregido: Botón movido fuera de la etiqueta

<label>
  Pick your age
  <select name="age">
    <option>Young</option>
    <option>Old</option>
  </select>
</label>
<button type="button">Help</button>

✅ Correcto: Un control dentro de una etiqueta (asociación implícita)

<label>
  Age
  <select id="age" name="age">
    <option>Young</option>
    <option>Old</option>
  </select>
</label>

Esto es válido porque el <label> contiene exactamente un descendiente etiquetable — el elemento <select>. La asociación entre el texto de la etiqueta y el control es implícita y clara tanto para los navegadores como para las tecnologías asistivas.

Más información:

WHATWG Spec

HTML Living Standard: the label element

→