i have a problem
My esLint rules:
"jsx-a11y/label-has-for": [ 2, {
"components": [],
"required": {
"every": [ "nesting", "id" ]
},
"allowChildren": true
}],
I want just for off this error, or fix, help me please
Error msg: A form label must be associated with a control. (jsx-a11y/label-has-associated-control)
JSX code:
<input
type="checkbox"
id="checkbox-2"
className="checkbox__input"
/>
<label
htmlFor="checkbox-2"
className="checkbox__label"
/>
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
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:
According to docs:
Case: The label is a sibling of the control.
<label htmlFor={domId}>Surname</label>
<input type="text" id={domId} />
If you want just for off this warning you can add the special comment just before the line with the label:
<input type="text" id="myinput" />
<>{ /* eslint-disable-next-line jsx-a11y/label-has-associated-control */ }</>
<label htmlFor="myinput"></label>
Here you can find many other ESLint inline comments for disabling rules: https://eslint.org/docs/user-guide/configuring#disabling-rules-with-inline-comments
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With