noRestrictedElements

import { Tabs, TabItem } from '@astrojs/starlight/components';

<Tabs> <TabItem label="JSX and TSX" icon="seti:javascript"> ## Summary - Rule available since: `v2.0.0` - Diagnostic Category: [`lint/correctness/noRestrictedElements`](/reference/diagnostics#diagnostic-category) - This rule isn't recommended, so you need to enable it. - This rule doesn't have a fix. - The default severity of this rule is [**information**](/reference/diagnostics#information). - Sources: - Same as [`react/forbid-elements`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/forbid-elements.md)

How to configure

json

{
	"linter": {
		"rules": {
			"correctness": {
				"noRestrictedElements": "error"
			}
		}
	}
}

Description

Disallow the use of configured elements.

This rule disallows the use of configured elements. Without elements configured, this rule doesn't do anything.

This rule is useful in situations where you want to enforce the use of specific components instead of certain HTML or custom elements. For example, in a React project, you might want to ensure that developers use a custom TextField component instead of the native <input> element to maintain consistency and apply custom styling or behavior.

Here are some scenarios where this rule can be beneficial:

Consistency: Ensuring that all input fields use a custom component instead of the native element to maintain a consistent look and feel across the application.
Accessibility: Enforcing the use of custom components that have built-in accessibility features, ensuring that the application is accessible to all users.
Custom Behavior: Requiring the use of components that encapsulate specific business logic or validation, reducing the risk of errors and improving code maintainability.
Styling: Ensuring that all elements adhere to the design system by using custom components that apply consistent styling.

By disallowing certain elements and enforcing the use of custom components, this rule helps maintain code quality and consistency across the codebase.

Options

json

{
	"linter": {
		"rules": {
			"correctness": {
				"noRestrictedElements": {
					"options": {
						"elements": {
							"input": "input is not allowed, use TextField component instead",
							"CustomComponent": "deprecated"
						}
					}
				}
			}
		}
	}
}

Examples

Invalid

Restricting the use of HTML elements:

jsx

<input />

Restricting the use of custom components:

jsx

<CustomComponent />

<pre class="language-text"><code class="language-text">code-block.jsx:1:1 <a href="https://biomejs.dev/linter/rules/no-restricted-elements">lint/correctness/noRestrictedElements</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ℹ deprecated > 1 │ <CustomComponent /> │ ^^^^^^^^^^^^^^^^^^^ 2 │ </code></pre>

Valid

jsx

<TextField />

</TabItem> </Tabs>