I have a label with an input. I want to make the whole label area clickable to trigger the input (a checkbox). So I have used the for
attribute as I believe this is exactly what it is intended for:
<label for={id}>
<input
name="checkbox"
type="radio"
data-id={id}
/>
</label>
Functionally this works but the linter does not like it:
error Unknown property 'for' found, use 'htmlFor' instead react/no-unknown-property
htmlFor
does not appear to have the same functionality as the for
attribute.
How can I change my code to make it work whilst retaining the functionality of for
- I'd rather avoid writing a custom function that selects the correlating checkbox when you click on the label when that functionality already exists with for