How To Fix "label-has-associated-control" error

Profile picture of Arjan Schouten, author of the blog post.
Author Arjan Schouten

Last updated:

A <label> element must be associated with a control element such as <input /> . Failure to do so will result in a lint error message stating that "A form label must be associated with a control".

How to fix the label-has-associated-control Eslint error?

You can connect fix the issue in these 2 ways:

  1. Solution 1: Fix jsx-a11y/label-has-associated-control by connecting via id:
    <label htmlFor="username-input">Username</label>
    <input id="username-input" name="login-username" type="text" />
  2. Solution 2: Wrapping the label around the element:
    <label>Username
    <input name="login-username" type="text" />
    </label>

You need to connect a <label> element to one of the following elements:

  • <input>
  • <select>
  • <textarea>
  • <fieldset>

Check Accessibility of your website

Why is it important to have a label attached to a control element?

It is important to give the user a clue about what value is expected for the given control element.

Assistive technologies need the <label> to let the user know what the expected input is for the form field.

To assist users with visual impairments in completing an online form, establish a connection between a control element and a corresponding label element by using one of the 2 techniques.

For more info see:

Share this article

Was this article helpful?

Checkout the ExcellentWebCheck services

ExcellentWebCheck's goal is to improve the online user experience. The tools of ExcellentWebCheck help to detect and improve usability problems on your website.