Skip to main content

label-no-multiple-controls

Per HTML Living Standard §4.10.4 (the label element), a <label>'s content model permits "no descendant labelable elements unless it is the element's labeled control". Two branches follow:

  • When for resolves to an external labelable element, that external element is the labeled control — the label must have no form-control descendants inside.
  • Otherwise, at most one form-control descendant (button, input, meter, output, progress, select, textarea) is allowed; the first in tree order is the labeled control.

This rule enforces both branches. for referencing a non-labelable element is reported by label-for-references-labelable; missing target IDs are reported by no-refer-to-non-existent-id. The a11y heuristic that every label associates with a control is handled by label-has-control.

❌ Examples of incorrect code for this rule

<label>Name: <input type="text" name="first" /> <input type="text" name="last" /></label>
<input id="username" /> <label for="username"><input /></label>

✅ Examples of correct code for this rule

<label>Name: <input type="text" name="full" /></label> <label for="meter1">Score:</label>
<meter id="meter1" value="3" max="10">3</meter>
<input id="username" /> <label for="username">Username</label>

Interface​

{
  "label-no-multiple-controls": boolean
}

Enforce the descendant-control constraints on a label element per HTML LS §4.10.4. Disallow more than one form-control descendant; additionally disallow any descendant control when for references an external labelable element.

Default Severity​

error