---
# Don't modify this file manually. This file is auto generated from source, and you will lose your changes next time the website is built.
# Head to the `biomejs/biome` repository, and modify the source code in there.

title: noRestrictedElements
description: Learn more about 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 title="biome.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 title='biome.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 />
```

<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> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━<br /><br />  <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">input is not allowed, use TextField component instead</span><br />  <br />  <strong><span style="color: Tomato;">&gt;</span></strong> <strong>1 │ </strong>&lt;input /&gt;<br />   <strong>   │ </strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><br />    <strong>2 │ </strong><br />  <br /></code></pre>

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> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━<br /><br />  <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">deprecated</span><br />  <br />  <strong><span style="color: Tomato;">&gt;</span></strong> <strong>1 │ </strong>&lt;CustomComponent /&gt;<br />   <strong>   │ </strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><br />    <strong>2 │ </strong><br />  <br /></code></pre>

### Valid

```jsx
<TextField />
```

## Related links

- [Disable a rule](/linter/#disable-a-rule)
- [Configure the code fix](/linter#configure-the-code-fix)
- [Rule options](/linter/#rule-options)
- [Source Code](https://github.com/biomejs/biome/blob/main/crates/biome_js_analyze/src/lint/correctness/no_restricted_elements.rs)
- [Test Cases](https://github.com/biomejs/biome/blob/main/crates/biome_js_analyze/tests/specs/correctness/noRestrictedElements)

</TabItem>
</Tabs>