EsLint rule for label
Case 1: You can make input inside label
<label>
<input type="text"/>
</label>
case 2: use htmlFor
<label htmlFor="first-name">
First Name
</label>
<input type="text" id="first-name" />
you can go through the details of rules through this page:
Edit:
According to docs:
Case: The label is a sibling of the control.
<label htmlFor={domId}>Surname</label>
<input type="text" id={domId} />
I solved it by adding the below lines in my eslint
file
{
....
"rules": {
"jsx-a11y/label-has-associated-control": ["error", {
"required": {
"some": ["nesting", "id"]
}
}],
"jsx-a11y/label-has-for": ["error", {
"required": {
"some": ["nesting", "id"]
}
}]
},
...
}
and don't forget to restart your local server
after adding those lines.
it's only working when the label htmlFor(React) or for(HTML)
and input id
is matched.
<label htmlFor="temp-id">Label</label>
<input type="text" id="temp-id" />
https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/issues/302#issuecomment-425512505