require input elements to have a label (input-missing-label)

All input elements must have an associated label.

It is required for accessibility tools to identify the purpose of the field.

For browsers it helps the user when clicking on the label to focus the field, especially important for checkboxes and radiobuttons where many users expect to be able to click in the label.

The label may either be explicitly associated using the for attribute or by nesting the <input> element inside the <label>. For regular input fields the former is recommended and for checkboxes and radiobuttons the latter is recommended.

Rule details

Examples of incorrect code for this rule:

<!-- no label element at all -->
<div>
    <strong>My field</strong>
    <input type="text">
    <textarea></textarea>
    <select>
        <option>Option</option>
    </select>
</div>

<!-- unassociated label -->
<div>
    <label>My field</label>
    <input type="text">
</div>
error: <input> element does not have a <label> (input-missing-label) at inline:4:6:
  2 | <div>
  3 |     <strong>My field</strong>
> 4 |     <input type="text">
    |      ^^^^^
  5 |     <textarea></textarea>
  6 |     <select>
  7 |         <option>Option</option>


error: <textarea> element does not have a <label> (input-missing-label) at inline:5:6:
  3 |     <strong>My field</strong>
  4 |     <input type="text">
> 5 |     <textarea></textarea>
    |      ^^^^^^^^
  6 |     <select>
  7 |         <option>Option</option>
  8 |     </select>


error: <select> element does not have a <label> (input-missing-label) at inline:6:6:
  4 |     <input type="text">
  5 |     <textarea></textarea>
> 6 |     <select>
    |      ^^^^^^
  7 |         <option>Option</option>
  8 |     </select>
  9 | </div>


error: <input> element does not have a <label> (input-missing-label) at inline:14:6:
  12 | <div>
  13 |     <label>My field</label>
> 14 |     <input type="text">
     |      ^^^^^
  15 | </div>


4 errors found.

Examples of correct code for this rule:

<!-- label with descendant -->
<div>
    <label>My field <input type="text"></label>
</div>

<!-- associated label -->
<div>
    <label for="my-field">My field</label>
    <input id="my-field" type="text">
</div>