InputMask

InputMask component is used to enter input in a certain format such as numeric, date, currency, email and phone.

Basic

SSN

Date

Phone

Phone Ext

Serial

Import via Module


import { InputMask } from 'primereact/inputmask';

Import via CDN


<script src="https://unpkg.com/primereact/core/core.min.js"></script>
<script src="https://unpkg.com/primereact/inputmask/inputmask.min.js"></script>

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>

Properties

InputMask passes any valid attribute to the underlying React HTMLInputElement element. Extended properties are as follows;

Name	Type	Default	Description
id	string	null	Unique identifier of the element.
value	string	null	Value of the component.
type	string	text	HTML5 input type
mask	string	null	Mask pattern.
slotChar	string	-	Placeholder character in mask, default is underscore.
autoClear	boolean	true	Clears the incomplete value on blur.
unmask	boolean	false	Defines if model sets the raw unmasked value to bound value or the formatted mask value.
style	string	null	Inline style of the element.
className	string	null	Style class of the element.
placeholder	string	null	Advisory information to display on input.
size	number	null	Size of the input field.
maxlength	number	null	Maximum number of character allows in the input field.
tabIndex	number	null	Specifies tab order of the element.
disabled	boolean	false	When present, it specifies that the element value cannot be altered.
readOnly	boolean	false	When present, it specifies that an input field is read-only.
name	string	null	Name of the input field.
required	boolean	false	When present, it specifies that the element must be filled out before submitting the form.
tooltip	any	null	Content of the tooltip.
tooltipOptions	object	null	Configuration of the tooltip, refer to the tooltip documentation for more information.

Events

Name	Parameters	Description
onFocus	event: Browser event	Callback to invoke when input receives focus.
onBlur	event: Browser event	Callback to invoke when input loses focus.
onComplete	event: Browser event value: New value of the component	Callback to invoke on when user completes the mask pattern.
onChange	originalEvent: Browser event value: New value of the component	Callback to invoke on value change.