labelAssociatedControls

Reports <label> elements without an associated control element.

✅ This rule is included in the jsx logical preset.

Form labels are a critical component of web accessibility. Screen readers and other assistive technologies rely on labels to identify and describe form controls. A label must be associated with a control element to provide this context.

This rule checks that all <label> elements have an associated control, either through:

• An htmlFor prop that references the id of a control element
• A control element nested within the label (input, select, textarea, meter, output, or progress)

Examples

❌ Incorrect

<label />

<label>Name</label>

<label>
  <span>Name</span>
</label>

✅ Correct

<label htmlFor="name">Name</label>

<label>
  Name <input type="text" />
</label>

<label>
  <input type="text" />
</label>

When Not To Use It

If you are using a framework that handles label associations differently or automatically generates accessible labels, you can safely disable this rule.

Further Reading

• WCAG 1.3.1 - Info and Relationships
• WCAG 2.4.6 - Headings and Labels
• WCAG 4.1.2 - Name, Role, Value
• MDN: The Label element

Equivalents in Other Linters

• ESLint: jsx-a11y/label-has-associated-control
• Oxlint: jsx_a11y/label-has-associated-control