noLabelWithoutControl

JSX and TSX

Summary

Rule available since: v1.8.0
Diagnostic Category: lint/a11y/noLabelWithoutControl
This rule is recommended, which means is enabled by default.
This rule doesn’t have a fix.
The default severity of this rule is error.
Sources:
- Same as jsx-a11y/label-has-associated-control

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "a11y": {
5
        "noLabelWithoutControl": "error"
6
      }
7
    }
8
  }
9
}

Description

Enforce that a label element or component has a text label and an associated input.

An “input” is considered one of the following elements: input, meter, output, progress, select, textarea or button.

There are two supported ways to associate a label with an input:

Wrapping an input in a label element.
Adding a for attribute (or htmlFor in React) to a label and assigning it a DOM ID string associated with an input on the page.

This rule checks that any label element (or an indicated custom component that will output a label element) meets one of these conditions:

Wraps an input element (or an indicated custom component that will output an input element)
Has a for or htmlFor attribute and that the label element/component has accessible text content.

Examples

Invalid

1
<label for="js_id" />;

code-block.jsx:1:1 lint/a11y/noLabelWithoutControl ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ A form label must be associated with an input.
  
  > 1 │ <label for=“js_id” />;
      │ ^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Consider adding an accessible text content to the label element.

1
<label for="js_id"><input /></label>;

code-block.jsx:1:1 lint/a11y/noLabelWithoutControl ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ A form label must be associated with an input.
  
  > 1 │ <label for=“js_id”><input /></label>;
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Consider adding an accessible text content to the label element.

1
<label htmlFor="js_id" />;

code-block.jsx:1:1 lint/a11y/noLabelWithoutControl ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ A form label must be associated with an input.
  
  > 1 │ <label htmlFor=“js_id” />;
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Consider adding an accessible text content to the label element.

1
<label htmlFor="js_id"><input /></label>;

code-block.jsx:1:1 lint/a11y/noLabelWithoutControl ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ A form label must be associated with an input.
  
  > 1 │ <label htmlFor=“js_id”><input /></label>;
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Consider adding an accessible text content to the label element.

1
<label>A label</label>;

code-block.jsx:1:1 lint/a11y/noLabelWithoutControl ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ A form label must be associated with an input.
  
  > 1 │ <label>A label</label>;
      │ ^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Consider adding a for or htmlFor attribute to the label element or moving the input element to inside the label element.

1
<div><label /><input /></div>;

code-block.jsx:1:6 lint/a11y/noLabelWithoutControl ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ A form label must be associated with an input.
  
  > 1 │ <div><label /><input /></div>;
      │      ^^^^^^^^^
    2 │ 
  
  ℹ Consider adding an accessible text content to the label element.
  
  ℹ Consider adding a for or htmlFor attribute to the label element or moving the input element to inside the label element.

Valid

1
<label for="js_id" aria-label="A label" />;
2
<label for="js_id" aria-labelledby="A label" />;
3
<label htmlFor="js_id" aria-label="A label" />;
4
<label htmlFor="js_id" aria-labelledby="A label" />;
5
<label>A label<input /></label>;
6
<label>A label<textarea /></label>;
7
<label><img alt="A label" /><input /></label>;

Options

The rule supports the following options:

inputComponents - An array of component names that should be considered the same as an input element.
labelAttributes - An array of attributes that should be treated as the label accessible text content.
labelComponents - An array of component names that should be considered the same as a label element.

Both options inputComponents and labelComponents don’t have support for namespace components (e.g. <Control.Input>).

1
{
2
  "linter": {
3
    "rules": {
4
      "a11y": {
5
        "noLabelWithoutControl": {
6
          "options": {
7
            "inputComponents": [
8
              "CustomInput"
9
            ],
10
            "labelAttributes": [
11
              "label"
12
            ],
13
            "labelComponents": [
14
              "CustomLabel"
15
            ]
16
          }
17
        }
18
      }
19
    }
20
  }
21
}