require-attrs

This rule enforces the use of elements with specified attributes in React/JSX.

How to use

// eslint.config.js (flat config)
import htmlReact from "@html-eslint/eslint-plugin-react";

export default [
  {
    files: ["**/*.jsx", "**/*.tsx"],
    plugins: {
      "@html-eslint/react": htmlReact,
    },
    rules: {
      "@html-eslint/react/require-attrs": [
        "error",
        { tag: "img", attr: "alt" },
      ],
    },
  },
];

Rule Details

This rule requires specified attributes to be present on matching elements. Only lowercase (native HTML) elements are checked; custom components are ignored.

Attributes that cannot be resolved statically are not reported. When an element has a spread attribute ({...props}), the check is skipped unless the attribute is written after the last spread, since a spread can add or override attributes at runtime:

<img {...props} />              {/* skipped: props may provide alt */}
<img alt="" {...props} />       {/* skipped: props may override alt */}
<img {...props} alt="" />       {/* checked: alt wins over props */}

Options

This rule takes an array of option objects:

1. tag (string, required): the HTML tag name to check.
2. attr (string, required): the attribute name that must be present.
3. value (string | boolean, optional): if specified, the attribute must have this exact value.
   1. A string requires that exact attribute value.
   2. true requires the boolean form: a bare attribute (disabled) or disabled={true}.
   3. false requires disabled={false}.
   4. Dynamic values (disabled={someVar}) are not compared.
4. message (string, optional): custom error message.
5. conditions (array, optional): conditions that must all be true before the attribute is enforced.

Examples of incorrect code for this rule:

<img />
<svg></svg>

Examples of correct code for this rule:

<img alt="" />
<svg viewBox="0 0 100 100"></svg>

With { tag: "input", attr: "disabled", value: true }:

<input />
<input disabled={false} />
<input disabled="true" />

<input disabled />
<input disabled={true} />