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

> Canonical HTML version: https://rocketvalidator.com/html-validation/the-label-element-may-contain-at-most-one-button-input-meter-output-progress-select-or-textarea-descendant
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

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

```html
<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

```html
<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

```html
<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

```html
<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

```html
<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)

```html
<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.