Skip to main content

How to Resolve "A form label must be associated with a control (jsx-a11y/label-has-associated-control)" ESLint Error in JavaScript

The ESLint error A form label must be associated with a control (jsx-a11y/label-has-associated-control) is an important accessibility rule. It flags <label> elements that are not correctly linked to a form control like an <input>, <textarea>, or <select>. Properly associating labels is crucial for screen readers and improves the user experience for everyone.

This guide will explain why this accessibility rule is important and show you the two standard, HTML-compliant ways to fix it: either by nesting the input inside the label, or by linking them with the htmlFor and id attributes.

Why This Rule is Important (Accessibility)​

A properly associated label provides two key benefits:

  1. Improved Click Target: Users can click on the label's text to focus the corresponding input field. This creates a larger, more user-friendly click area.
  2. Screen Reader Support: Assistive technologies like screen readers use this association to announce what the input field is for when the user navigates to it, which is essential for visually impaired users.

The jsx-a11y/label-has-associated-control rule enforces this best practice.

The simplest and most direct way to associate a label with its control is to wrap the <input> element directly inside the <label> element. This is called implicit association.

Example of code with problems:

// ⛔️ Error: The label is not associated with the input.
<div>
  <label>First Name</label>
  <input type="text" id="firstName" />
</div>

By nesting the input, the association is made automatically by the browser, and the ESLint error will be resolved.

// ✅ Correct: The input is nested inside the label.
<div>
  <label>
    First Name
    <input type="text" id="firstName" />
  </label>
</div>
note

This is the recommended approach for its simplicity and reliability.

Solution 2: Linking with htmlFor and id​

Sometimes, you cannot nest the input inside the label due to styling or layout constraints. In this case, you can create an explicit association by linking them.

The logic:

  1. Give the <input> element a unique id attribute.
  2. Give the <label> element an htmlFor attribute whose value is the exact same as the input's id.
note

In plain HTML, this attribute is called for, but because for is a reserved keyword in JavaScript, React uses the camelCase htmlFor prop instead.

Solution:

// ✅ Correct: The label's `htmlFor` matches the input's `id`.
<div>
  <label htmlFor="firstName">First Name</label>
  <input type="text" id="firstName" />
</div>
note

This method is just as valid and accessible as nesting.

Advanced: Configuring the ESLint Rule​

By default, some ESLint configurations might only allow one of these methods. If you are using a valid association but still getting an error, you may need to adjust your .eslintrc file to allow both.

This configuration tells ESLint that a label is valid if it satisfies either the nesting or the ID-linking method.

In .eslintrc.js:

module.exports = {
  // ... other ESLint config
  rules: {
    'jsx-a11y/label-has-associated-control': ['error', {
      required: {
        some: ['nesting', 'id'],
      },
    }],
  },
};

When to Disable the Rule (and How)​

You should only disable this rule as a last resort. However, if you are using a custom component library that handles the association internally, you may get a false positive.

How to Disable for a Single Line:​

// eslint-disable-next-line jsx-a11y/label-has-associated-control
<label>My Custom Input <MyCustomInput /></label>
// In .eslintrc.js
rules: {
  'jsx-a11y/label-has-associated-control': 'off',
},

Conclusion​

The label-has-associated-control error is a helpful reminder to build accessible forms.

  • The best practice is to fix the error, not disable the rule.
  • The simplest solution is to nest your <input> inside your <label>.
  • If you cannot nest, use the htmlFor and id attributes to create an explicit link.

By following these simple HTML patterns, you can resolve the ESLint error and create a better, more accessible experience for all your users.

Table of Contents