Search code examples
csscheckboxlabelfor-attribute

why do I need to bind checkbox with a label?

I got a quick question here. Why do we always bind a checkbox id to the for-attribute in a label? Does it have any purpose? If so, can you please list it out? And also its technical advantage.

Thanks in advance, Madhu.

Solution

  • You don't always have to bind a checkbox (or any input) id to a label. What it does is allow you to click the label to trigger a click of the checkbox (or input). This also works if the label element wraps the <input> without requiring id/for:

    <label for="checkbox">Click checkbox</label> <input id="checkbox" type=checkbox>
<label>Click checkbox <input type=checkbox></label>