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