required-attributes

Enforce required attributes on React components with customizable ignore lists. This rule is part of eslint-plugin-react-features and provides LLM-optimized error messages with fix suggestions.

💡 Provides suggestions | 🔧 Automatically fixable

Quick SummaryCopy Anchor Link

Rule DetailsCopy Anchor Link

Ensures React components have required attributes (e.g., accessibility attributes, data attributes).

ConfigurationCopy Anchor Link

AttributeRule ObjectCopy Anchor Link

ExamplesCopy Anchor Link

❌ IncorrectCopy Anchor Link

// With { attributes: [{ attribute: 'data-testid' }] }
<button onClick={handleClick}>Click me</button>
<Card title="Profile" />

Nothing is required by default. Each configured attribute is required on every JSX element (intrinsic, component or member) unless ignoreTags names the tag for that attribute or ignoreComponents names the element. React's Fragment accepts no attribute but key, so nothing is required of it.

✅ CorrectCopy Anchor Link

// With required attributes
<button onClick={handleClick} aria-label="Submit form">
  Click me
</button>

<img src="/photo.jpg" alt="Profile photo" />

Configuration ExamplesCopy Anchor Link

Accessibility EnforcementCopy Anchor Link

{
  rules: {
    'react-features/required-attributes': ['error', {
      attributes: [
        {
          attribute: 'alt',
          ignoreTags: ['div', 'span'],
          message: 'Images must have alt text for accessibility',
          suggestedValue: ''
        },
        {
          attribute: 'aria-label',
          ignoreTags: ['div', 'p'],
          message: 'Interactive elements need aria-label'
        }
      ],
      ignoreComponents: ['Icon', 'Logo']
    }]
  }
}

Data Tracking AttributesCopy Anchor Link

{
  rules: {
    'react-features/required-attributes': ['warn', {
      attributes: [
        {
          attribute: 'data-testid',
          message: 'Add data-testid for E2E testing',
          suggestedValue: 'element-name'
        },
        {
          attribute: 'data-analytics',
          ignoreTags: ['div', 'span'],
          message: 'Trackable elements need data-analytics'
        }
      ]
    }]
  }
}

Why This MattersCopy Anchor Link

Comparison with AlternativesCopy Anchor Link

Related RulesCopy Anchor Link

• img-requires-alt (planned) - Specific img alt enforcement
• react-no-inline-functions - React performance optimization
• react-class-to-hooks - React modernization

Further ReadingCopy Anchor Link

• WCAG 2.1 Guidelines - Web accessibility guidelines
• React Accessibility - React accessibility guide
• ARIA Attributes - ARIA documentation
• ESLint MCP Setup - Enable AI assistant integration

Known False NegativesCopy Anchor Link

• An element with a spread (<input {...rest} />) is reported even though the spread may carry the attribute.
• type and name are only required on input, button, select and textarea.

Use this rule

npm install -D oxlint-plugin-react-features

{  "jsPlugins": ["oxlint-plugin-react-features"],  "rules": {    "react-features/required-attributes": "error"  }}

import { defineConfig } from 'vite-plus';export default defineConfig({  lint: {    jsPlugins: ['oxlint-plugin-react-features'],    rules: {      'react-features/required-attributes': 'error',    },  },});