DEV Community

loading...
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.

Setup

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

Import

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

Theming

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

Resources

Visit the PrimeReact KeyFilter showcase for demos and documentation.

Discussion (0)

Forem Open with the Forem app