How To Fix "label-has-associated-control" error
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:
- 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" /> - 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:
- Use the Accessibility Checker to verify that your website complies with applicable accessibility legislation.
- The official eslint-plugin-jsx-a11y documentation
Was this article helpful?
Thanks for your feedback!