DEV Community

Cover image for React KeyFilter

React KeyFilter

primetek profile image PrimeTek ・1 min read

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


Refer to PrimeReact setup documentation for download and installation steps for your environment.


import { InputText } from 'primereact/inputtext';
Enter fullscreen mode Exit fullscreen mode

 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.

<InputText keyfilter="int" />
Enter fullscreen mode Exit fullscreen mode

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;

<InputText keyfilter={/^[^#<>*!]+$/}/>
Enter fullscreen mode Exit fullscreen mode


KeyFilter supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.


Visit the PrimeReact KeyFilter showcase for demos and documentation.

Discussion (0)

Forem Open with the Forem app