clubmate.fi

How to make form element label clickable

It’s good accessibility have a large click area on form elements.

The label and field can be "linked" with by adding a for attribute to the label, giving it the id of the form field:

<input type="checkbox" id="example-checkbox" />
<label for="example-checkbox">Example checkbox</label>

Or wrap the input and the label text to the label.

<label>
  <input type="checkbox" />
  Example checkbox
</label>

Same goes for all types of input fields.