label tags should have a text label and an associated control JS-0752
Anti-pattern
Minor
7 months ago
—
2 years old
A form label must be associated with a control
144 />
145 </div>
146 <div className="">
147 <label className="label">148 <span>Email</span>
149 </label>
150 <inputA form label must be associated with a control
133 )}
134 <div className="grid h-48 ml-10 mr-auto mt-6 grid-rows-2">
135 <div className="">
136 <label className="label">137 <span>Username</span>
138 </label>
139 <inputA form label must be associated with a control
114 <div
115 className={"form-control m-auto z-20 "}
116 >
117 <label className={"label"}>118 <button className="btn opacity-90 cursor-pointer capitalize rounded-xl bg-red-400 hover:bg-red-500 text-white ">
119 change photo
120 </button>
Description
It is recommended to add text attributes for label tags as it helps the browser in easing accessibility operations.
There are two supported ways to associate a label with a control:
- Wrapping a control in a label tag.
- Adding
htmlForto a label and assigning it a DOM ID string that indicates an input on the page.
Bad Practice
function Func(props) {
return <label {...props} />
}
<input type="text" />
<label>Surname</label>
Recommended
function Func(props) {
const {
htmlFor,
...otherProps
} = props;
return <label htmlFor={htmlFor} {...otherProps} />
}
<label>
<input type="text" />
Surname
</label>