How to fix "A form label must be associated with a control" ? ESlint-CodePudding

I have read that htmlFor needs to be added to fix this error, but even with this piece of code, ESlint gives me an error. How can I fix this?

        <input readOnly type="radio" name="slider-2" id="s1-2" checked />
        <input readOnly type="radio" name="slider-2" id="s2-2" />
        <input readOnly type="radio" name="slider-2" id="s3-2" />

        <label type="text" htmlFor="s1-2" id="slide1-2">
          <div className="slider-image">
            <img src={SecendQadroFirst} alt="qadro" />
          </div>
        </label>
        <label htmlFor="s2-2" id="slide2-2">
          <div className="slider-image">
            <img src={SecendQadroSecend} alt="qadro" />
          </div>
        </label>
        <label htmlFor="s3-2" id="slide3-2">
          <div className="slider-image">
            <img src={SecendQadroThird} alt="qadro" />
          </div>
        </label>

CodePudding user response：

The attribute you want in the <label> element is simply for, and the value must be the id of the <input> element it is associated with. The input should be after the </label> closing tag

<label type="text" for="s1-2" id="slide1-2">
   <div className="slider-image">
      <img src={SecendQadroFirst} alt="qadro">
   </div>
</label>
<input readOnly type="radio" name="slider-2" id="s1-2" checked>

<label for="s2-2" id="slide2-2">
   <div className="slider-image">
      <img src={SecendQadroSecend} alt="qadro">
   </div>
</label>
<input readOnly type="radio" name="slider-2" id="s2-2">
        
        
<label for="s3-2" id="slide3-2">
   <div className="slider-image">
       <img src={SecendQadroThird} alt="qadro">
   </div>
</label>
<input readOnly type="radio" name="slider-2" id="s3-2">

CodePudding user response：

Simply write for instead of htmlFor.