There is a div with some elements in it and I want to add a label to it.
This is the original:
<div className="upload-image">
<input
name="image"
id="image-input"
accept="image/*"
onChange={this.doSomething}
multiple
type="file"
className="myClass"
/>
<span className="upload-image-label">
<Icon name="image outline" />
drop the image here
</span>
</div>
after the label is added:
<div className="upload-image">
<label htmlFor="image-input">Add image</label> //this line is added
<input
name="image"
id="image-input"
accept="image/*"
onChange={this.doSomething}
multiple
type="file"
className="myClass"
/>
<span className="upload-image-label">
<Icon name="image outline" />
drop the image here
</span>
</div>
Initially it was for
instead of htmlFor
but React said it is an unknown property.
Now, the error says:
A form label must be associated with a control
Any suggestions?
There is a div with some elements in it and I want to add a label to it.
This is the original:
<div className="upload-image">
<input
name="image"
id="image-input"
accept="image/*"
onChange={this.doSomething}
multiple
type="file"
className="myClass"
/>
<span className="upload-image-label">
<Icon name="image outline" />
drop the image here
</span>
</div>
after the label is added:
<div className="upload-image">
<label htmlFor="image-input">Add image</label> //this line is added
<input
name="image"
id="image-input"
accept="image/*"
onChange={this.doSomething}
multiple
type="file"
className="myClass"
/>
<span className="upload-image-label">
<Icon name="image outline" />
drop the image here
</span>
</div>
Initially it was for
instead of htmlFor
but React said it is an unknown property.
Now, the error says:
A form label must be associated with a control
Any suggestions?
Share Improve this question asked Jun 10, 2020 at 14:47 Leo MessiLeo Messi 6,21622 gold badges79 silver badges154 bronze badges2 Answers
Reset to default 3I know that the question has been asked a while ago. Still I face this error message. I thought I share the result by which I was able to solve my problem.
Make sure that the label has htmlFor. the htmlFor that you mentioned for the label should be the id of the input field. Wrap the input field inside the opening and the closing tags of the label.
This is how the label and input field code should look like:
<label className="list-group-item" htmlFor="first-checkbox">
<input
className="form-check-input me-1"
type="checkbox"
value=""
id="first-checkbox"
/>
First checkbox
</label>;
Place the input inside the label.
To associate a label with another control implicitly, the control element must be within the contents of the LABEL element.
Source: W3, Forms in HTML document - 17.9 Labels