Cualquier descendiente “select” de un elemento “label” con un atributo “for” debe tener un valor de ID que coincida con ese atributo “for”.

El elemento label asocia una descripción con un control de formulario. Hay dos formas de crear esta asociación:

1. Asociación implícita — Coloca el control de formulario directamente dentro del elemento label. No se necesitan atributos for o id.
2. Asociación explícita — Usa el atributo for en el label, estableciendo su valor al id del control de formulario asociado.

Ambos métodos funcionan de forma independiente. El problema surge cuando los mezclas incorrectamente — anidar un select dentro de un label que tiene un atributo for, pero el select o no tiene id o tiene un id que no coincide con el valor for. En esta situación, la asociación explícita (vía for) apunta a nada o al elemento incorrecto, mientras que la asociación implícita (vía anidamiento) todavía existe. Este estado contradictorio viola la especificación HTML y puede causar que las tecnologías de asistencia como los lectores de pantalla identifiquen mal o se salten la etiqueta, reduciendo la accesibilidad para usuarios que dependen de ellas.

La especificación WHATWG HTML requiere que cuando un atributo for está presente en un label, debe referenciar un elemento etiquetable válido por id. Si el control de formulario ya está anidado dentro del label, el atributo for es redundante — pero si está presente, aún debe referenciar correctamente ese control.

Cómo solucionarlo

Tienes dos opciones:

1. Eliminar el atributo for — Si el select ya está dentro del label, la asociación implícita maneja todo. Esta es la solución más simple.
2. Añadir o corregir el id — Mantén el atributo for pero asegúrate de que el select tenga un id coincidente.

Ejemplos

❌ Incorrecto: atributo for sin id coincidente

El atributo for referencia "age", pero el select no tiene id en absoluto:

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

❌ Incorrecto: atributo for con un id que no coincide

El atributo for referencia "age", pero el select tiene un id diferente:

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

✅ Opción de solución 1: eliminar el atributo for (asociación implícita)

Dado que el select está anidado dentro del label, la asociación implícita es suficiente:

<label>
  Age
  <select>
    <option>Young</option>
    <option>Old</option>
  </select>
</label>

✅ Opción de solución 2: hacer coincidir el atributo for con el id (asociación explícita)

Mantén el atributo for y dale al select un id coincidente:

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

✅ Opción de solución 3: separar el label y el select (solo asociación explícita)

Si prefieres mantener el select fuera del label, se requiere asociación explícita con for e id coincidentes:

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

En la mayoría de los casos, la opción 1 (eliminar el atributo for) es la solución más limpia cuando el control ya está anidado. Usa la asociación explícita cuando el label y el control están en partes separadas del DOM, como en diseños complejos de tablas o grillas.

Más información:

WHATWG Spec

HTML Living Standard: the label element

→

WHATWG Spec

HTML Living Standard: the select element

→