“label” element with multiple labelable descendants.

The HTML specification defines a <label> as a caption for a specific form control. When you use the implicit labeling technique — wrapping a form control inside a <label> — the browser automatically associates the label text with that single control. If multiple labelable elements appear inside the same <label>, the association becomes ambiguous. Browsers may pick the first one, the last one, or behave inconsistently across implementations.

Labelable elements include <input> (except type="hidden"), <select>, <textarea>, <button>, <meter>, <output>, and <progress>. Any combination of two or more of these inside a single <label> triggers this validation error.

This matters for accessibility. Screen readers rely on the label-to-control association to announce what a form field is for. When the association is ambiguous, assistive technology may announce the wrong label for a control, or skip one entirely, leaving users confused about what information to enter.

To fix this issue, split the <label> so that each one wraps exactly one form control, or use the for attribute to explicitly associate each label with a control by its id.

Examples

❌ Incorrect: multiple labelable elements inside one label

<label>
  Name
  <input type="text" name="name">
  Age
  <input type="number" name="age">
</label>

The single <label> contains two <input> elements, so the browser cannot determine which control the label text refers to.

✅ Correct: separate labels for each control

<label>
  Name
  <input type="text" name="name">
</label>
<label>
  Age
  <input type="number" name="age">
</label>

❌ Incorrect: mixing different labelable elements inside one label

<label>
  Preferences
  <select name="color">
    <option>Red</option>
    <option>Blue</option>
  </select>
  <textarea name="notes"></textarea>
</label>

✅ Correct: using explicit for attributes

<label for="color">Favorite color</label>
<select id="color" name="color">
  <option>Red</option>
  <option>Blue</option>
</select>

<label for="notes">Notes</label>
<textarea id="notes" name="notes"></textarea>

✅ Correct: single labelable descendant with implicit association

This is the pattern that works perfectly — one <label> wrapping exactly one control:

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

❌ Incorrect: hidden inputs don’t count, but other inputs do

Note that <input type="hidden"> is not a labelable element, so it won’t trigger this error on its own. However, combining a visible input with another labelable control still causes the issue:

<label>
  Subscribe
  <input type="checkbox" name="subscribe">
  <button type="button">More info</button>
</label>

✅ Correct: separate each control into its own label

<label>
  Subscribe
  <input type="checkbox" name="subscribe">
</label>
<button type="button">More info</button>

In this case, the <button> doesn’t need a <label> at all — its text content serves as its accessible name. Only form controls that need a visible caption should be wrapped in a <label>.

Learn more:

WHATWG Spec

HTML Living Standard: the label element

→