React InputMask component is used to enter input in a certain format such as numeric, date, currency, email and phone.
Setup
Refer to PrimeReact setup documentation for download and installation steps for your environment.
Import
import { InputMask } from 'primereact/inputmask';
Getting Started
InputMask is used as a controlled component with value and onChange properties.
<InputMask mask="99-999999" value={value} onChange={(e) => setValue(e.value)}></InputMask>
Mask
Mask format can be a combination of the the following built-in definitions.
- a - Alpha character (A-Z,a-z)
- 9 - Numeric character (0-9)
- * - Alpha numberic character (A-Z,a-z,0-9)
<InputMask mask="a*-999-a999" value={value} onChange={(e) => setValue(e.value)}></InputMask>
SlotChar
Underscore is the default placeholder for a mask and this can be customized using slotChart option.
<InputMask mask="99/99/9999" slotChar="mm/dd/yyyy" value={value} onChange={(e) => setValue(e.value)}></InputMask>
Optional Values
If the input does not complete the mask definition, it is cleared by default. Use autoClear property to control this behavior. In addition, certain part of a mask can be made optional by using ? symbol where anything after the question mark becomes optional.
<InputMask mask="(999) 999-9999? x99999" value={value} onChange={(e) => setValue(e.value)}></InputMask>
Theming
InputMask supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.
Resources
Visit the PrimeReact InputMask showcase for demos and documentation.