<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
<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
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
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:
We are sorry to hear that you are not satisfied with the content on this page.