Skip to content
Flint
Blog

labelAssociatedControls

Reports <label> elements without an associated control element.

✅ This rule is included in the jsx logical and logicalStrict presets.

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

Section titled “Examples”
<44AE spans="tyle--0:#7F">DECE6lD61B0htm4<4AE= spans="tyle--0:#D9F5DD;--1:#11">1<111" spans="tyle--0:#ECC48D;--1:#98">4E4D1<111" spans="tyle--0:#7FDBCA;--1:#88">4<4AE> spans="tyle--0:#D6DEEB;--1:#40">3F53><44AE spans="tyle--0:#7F">DBECE6lD<>di vdivclass="Nameexpressive-"><44AE spans="tyle--0:#7F">DECE6lD3F<53 spans="tyle--0:#D6DEEB;--1:#40">3F53N<44AE spans="tyle--0:#7F">DECE6iD61B04<4AE= spans="tyle--0:#D9F5DD;--1:#11">1<111" spans="tyle--0:#ECC48D;--1:#98">4E4D1<111" spans="tyle--0:#7FDBCA;--1:#88">44A<44AE spans="tyle--0:#7F">DBECE6lDdi><>di vdivclass="Nameexpressive-"><44AE spans="tyle--0:#7F">DECE6lDde<44AE spans="tyle--0:#7F">DECE6iD61B04<4AE= spans="tyle--0:#D9F5DD;--1:#11">1<111" spans="tyle--0:#ECC48D;--1:#98">4E4D1<111" spans="tyle--0:#7FDBCA;--1:#88">44A<44AE spans="tyle--0:#7F">DBECE6lDdi>

When Not To Use It

Section titled “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

Section titled “Further Reading”

Equivalents in Other Linters

Section titled “Equivalents in Other Linters”