The “label” element may contain at most one “button”, “input”, “meter”, “output”, “progress”, “select”, or “textarea” descendant.

The HTML specification defines the <label> element as a caption for a single form control. When you place multiple labelable elements inside one <label>, the browser cannot determine which control the label text is associated with. This creates ambiguity for assistive technologies like screen readers, which rely on a clear one-to-one relationship between labels and their controls to announce form fields correctly. It also breaks the click-to-focus behavior — clicking the label text should focus or activate the associated control, but with multiple controls nested inside, the intended target is unclear.

Labelable elements are specifically: <button>, <input> (except type="hidden"), <meter>, <output>, <progress>, <select>, and <textarea>. If any combination of two or more of these appears as descendants of a single <label>, the validator will flag the error.

A common scenario that triggers this is when developers try to group related fields — like a first name and last name — inside one label, or when they nest a button alongside an input within a label for styling convenience.

How to Fix It

1. Use one <label> per control. Wrap each labelable element in its own <label>, or use the for attribute to associate a <label> with a specific control’s id.
2. Use a container element for grouping. If you need to visually group related controls, use a <fieldset> with a <legend> instead of a single <label>.

Examples

❌ Incorrect: Two inputs inside one label

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

This is invalid because the <label> contains two <input> descendants.

✅ Fixed: Separate labels for each 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">

✅ Fixed: Using a fieldset to group related controls

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

❌ Incorrect: A select and a button inside one label

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

✅ Fixed: Button moved outside the label

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

✅ Correct: One control inside a label (implicit association)

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

This is valid because the <label> contains exactly one labelable descendant — the <select> element. The association between the label text and the control is implicit and clear to both browsers and assistive technologies.

Learn more:

WHATWG Spec

HTML Living Standard: the label element

→