noLabelWithoutControl

Diagnostic Category: lint/a11y/noLabelWithoutControl

JSX and TSX

Since: v1.8.0

Sources:

Same as: jsx-a11y/label-has-associated-control

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 or textarea.

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

<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.

<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.

<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.

<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.

<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.

<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

<label for="js_id" aria-label="A label" />;
<label for="js_id" aria-labelledby="A label" />;
<label htmlFor="js_id" aria-label="A label" />;
<label htmlFor="js_id" aria-labelledby="A label" />;
<label>A label<input /></label>;
<label>A label<textarea /></label>;
<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>).

{
    "//": "...",
    "options": {
        "inputComponents": ["CustomInput"],
        "labelAttributes": ["label"],
        "labelComponents": ["CustomLabel"]
    }
}

How to configure

{
  "linter": {
    "rules": {
      "a11y": {
        "noLabelWithoutControl": "error"
      }
    }
  }
}