no-invalid-html-attribute

Keywords: React, JSX, HTML attributes, validation, ESLint rule, accessibility, LLM-optimized

Validate HTML attribute values in JSX. This rule is part of eslint-plugin-react-features.

Quick Summary

Aspect	Details
Severity	Warning (correctness)
Auto-Fix	💡 Suggests corrections
Category	React
ESLint MCP	✅ Optimized for ESLint MCP integration
Best For	HTML/JSX correctness, accessibility

Validates that HTML attribute values are valid according to HTML spec.

Attribute	Valid Values
`rel`	`noopener`, `noreferrer`, `nofollow`, etc.
`target`	`_blank`, `_self`, `_parent`, `_top`
`type` (input)	`text`, `email`, `password`, etc.
`autocomplete`	`on`, `off`, `name`, `email`, etc.

<label for="input-id">Label</label>

<a rel="noopener noreferrer">Link</a>
<a target="_blank">Link</a>
<input type="email" />
<input autoComplete="email" />

{
  rules: {
    'react-features/no-invalid-html-attribute': 'warn'
  }
}

The following patterns are not detected due to static analysis limitations:

Why: Static analysis cannot trace values stored in variables or passed through function parameters.

// ❌ NOT DETECTED - Prop from variable
const propValue = computedValue;
<Component prop={propValue} /> // Computation not analyzed

Mitigation: Implement runtime validation and review code manually. Consider using TypeScript branded types for validated inputs.

Why: Custom wrapper functions or aliased methods are not recognized by the rule.

// ❌ NOT DETECTED - Custom wrapper
function myWrapper(data) {
  return internalApi(data); // Wrapper not analyzed
}
myWrapper(unsafeInput);

Mitigation: Apply this rule's principles to wrapper function implementations. Avoid aliasing security-sensitive functions.

Why: When values come from imports, the rule cannot analyze their origin or construction.

// ❌ NOT DETECTED - Value from import
import { getValue } from './helpers';
processValue(getValue()); // Cross-file not tracked

Mitigation: Ensure imported values follow the same constraints. Use TypeScript for type safety.