Source: https://primereact.org/keyfilter/

Introducing PrimeReact v11 Alpha 🥁Learn More

SearchK
10.9.7
FEATURES
API

KeyFilter

KeyFilter is a built-in feature of InputText to restrict user input based on a regular expression.

Import#

import { InputText } from 'primereact/inputtext';

Copy

Presets#

KeyFilter provides various presets configured with the keyfilter property.

Integer

Number

Money

Hex

Alphabetic

Alphanumeric

Positive Integer

Positive Number

<InputText keyfilter="int" />
<InputText keyfilter="pint" />
<InputText keyfilter="num" />
<InputText keyfilter="pnum" />
<InputText keyfilter="money" />
<InputText keyfilter="hex" />
<InputText keyfilter="alpha" />
<InputText keyfilter="alphanum" />
<InputText keyfilter="email" />

Copy

Regex (Single Keypress)#

In addition to the presets, a regular expression can be configured for customization of blocking a single key press.

Block Space

Block < > * !

<InputText keyfilter={/[^s]/} />
<InputText keyfilter={/^[^<>*!]+$/}  />

Copy

Regex (Whole Word)#

In addition to the presets, a regular expression can be used to validate the entire word using validateOnly.

Numeric (allow "+" only once at start)

<InputText id="numkeys" keyfilter={/^[+]?(\d{1,12})?$/} validateOnly onInput={validateInput} />

Copy

Accessibility#

Refer to InputText for accessibility as KeyFilter is a built-in add-on of the InputText.

Import
Presets
Regex (Single Keypress)
Regex (Whole Word)
Accessibility

PrimeReact 10.9.7 by PrimeTek