# “label” element with multiple labelable descendants.

> Canonical HTML version: https://rocketvalidator.com/html-validation/label-element-with-multiple-labelable-descendants
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

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

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

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

### ❌ Incorrect: mixing different labelable elements inside one label

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

### ✅ Correct: using explicit `for` attributes

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

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

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

### ✅ Correct: separate each control into its own label

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