Hacker News Reader

Comment by 8ig8 | Hacker News Reader

With checkboxes, nesting the input inside the label makes the label clickable. It provides a larger target for checking, unchecking.

Edit, to add: To avoid nesting you can use the for attribute. More info on the following link addressing checkboxes and input nesting, in general:

The `for` attribute (`htmlFor` in jsx) will also allow the same kind of behavior:

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

Edit: You edited while I was typing this out and added info about the `for` ;)

This certainly works but margins are still a dead-zone around inputs. Nesting the inputs can give you larger touch targets which is often preferable.