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

Question

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>

Have you tried to put the inputs inside their corresponding labels? — Osmanys Fuentes-Lombá, Jun 14 '22 at 15:14
Duplicate of [Label must have associated control](https://stackoverflow.com/q/62306461/215552) (don't have the votes to close). — Heretic Monkey, Jun 14 '22 at 15:43
Does this answer your question? [Label must have associated control](https://stackoverflow.com/questions/62306461/label-must-have-associated-control) — Jesse, Sep 13 '22 at 20:54

score 2 · Answer 1 · answered Sep 08 '22 at 14:41

You need to put the input between the label itself and ensure that you have the htmlFor attribute for the label.

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

score -1 · Answer 2 · answered Jun 14 '22 at 15:33

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">

This is JSX not HTML – Mostafa Ahangarha Jul 13 '22 at 17:53 — Mostafa Ahangarha, Jul 13 '22 at 17:53

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

2 Answers2