<p>React KeyFilter feature restricts user input based on a regular expression.</p>
<h3 id="setup">Setup</h3>
<p>Refer to PrimeReact <a target="_blank" href="https://primefaces.org/primereact/showcase/#/setup">setup documentation</a> for download and installation steps for your environment.</p>
<h3 id="import">Import</h3>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> { InputText } <span class="hljs-keyword">from</span> <span class="hljs-string">'primereact/inputtext'</span>;
</code></pre>
<h3 id="getting-started">Getting Started</h3>
<p>KeyFilter property is integrated in input components such as InputText using the <strong>keyfilter</strong> property. The value of the filter can either a built-in regular expression or a custom one. Following input only accepts integers.</p>
<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-name">InputText</span> <span class="hljs-attr">keyfilter</span>=<span class="hljs-string">"int"</span> /&gt;</span>
</code></pre>
<h3 id="built-in-filters">Built-in Filters</h3>
<p>Commonly used cases have their own built-in shortcuts.</p>
<ul>
<li>pint: Positive integers</li>
<li>int: Integers</li>
<li>pnum: Positive numbers</li>
<li>num: Numbers</li>
<li>hex: Hexadecimal</li>
<li>email: Email</li>
<li>alpha: Alphabetic</li>
<li>alphanum: Alphanumeric</li>
</ul>
<h3 id="custom-filter">Custom Filter</h3>
<p>A custom filter is enabled by binding a regular expression, an example that blocks special characters would be;</p>
<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-name">InputText</span> <span class="hljs-attr">keyfilter</span>=<span class="hljs-string">{/^[^#</span>&lt;&gt;</span>*!]+$/}/&gt;
</code></pre>
<h3 id="theming">Theming</h3>
<p>KeyFilter supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the <a target="_blank" href="https://primefaces.org/primereact/showcase/#/theming">Designer</a> tool.</p>
<h3 id="resources">Resources</h3>
<p>Visit the PrimeReact <a target="_blank" href="https://primefaces.org/primereact/showcase/#/keyfilter">KeyFilter</a> showcase for demos and documentation.</p>


React KeyFilter feature restricts user input based on a regular expression.

### Setup

Refer to PrimeReact [setup documentation](https://primefaces.org/primereact/showcase/#/setup) for download and installation steps for your environment.

### Import

```js
import { InputText } from 'primereact/inputtext';
```
 
### Getting Started

KeyFilter property is integrated in input components such as InputText using the **keyfilter** property. The value of the filter can either a built-in regular expression or a custom one. Following input only accepts integers.

```html
<InputText keyfilter="int" />
```

### Built-in Filters

Commonly used cases have their own built-in shortcuts.

- pint: Positive integers
- int: Integers
- pnum: Positive numbers
- num: Numbers
- hex: Hexadecimal
- email: Email
- alpha: Alphabetic
- alphanum: Alphanumeric

### Custom Filter

A custom filter is enabled by binding a regular expression, an example that blocks special characters would be;

```html
<InputText keyfilter={/^[^#<>*!]+$/}/>
```

### Theming

KeyFilter supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the [Designer](https://primefaces.org/primereact/showcase/#/theming) tool.

### Resources

Visit the PrimeReact [KeyFilter](https://primefaces.org/primereact/showcase/#/keyfilter) showcase for demos and documentation.
