jsx_a11y/label-has-associated-control Correctness

✅ This rule is turned on by default.

What it does

Enforce that a label tag has a text label and an associated control.

Why is this bad?

A form label that either isn't properly associated with a form control (such as an <input>), or doesn't contain accessible text, hinders accessibility for users using assistive technologies such as screen readers. The user may not have enough information to understand the purpose of the form control.

Examples

Examples of incorrect code for this rule:

function Foo(props) {
    return <label {...props} />
}

<input type="text" />
<label>Surname</label>

Examples of correct code for this rule:

function Foo(props) {
  const { htmlFor, ...otherProps } = props;

  return <label htmlFor={htmlFor} {...otherProps} />;
}

<label>
  <input type="text" />
  Surname
</label>;

How to use

To enable this rule in the CLI or using the config file, you can use:

CLI

oxlint --deny jsx-a11y/label-has-associated-control --jsx-a11y-plugin

Config (.oxlintrc.json)

{
  "plugins": ["jsx-a11y"],
  "rules": {
    "jsx-a11y/label-has-associated-control": "error"
  }
}

References

• Rule Source