Vue InputMask component is used to enter input in a certain format such as numeric, date, currency, email and phone. It supports Vue 3 with PrimeVue 3 and Vue 2 with PrimeVue 2.
Setup
Refer to PrimeVue setup documentation for download and installation steps for your environment such as Vue CLI, Vite or browser.
Import
import InputMask from 'primevue/inputmask';
Getting Started
A model can be bound using the standard v-model directive.
<InputMask v-model="value" mask="99-999999" />
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 v-model="value" mask="a*-999-a999" />
SlotChar
Underscore is the default placeholder for a mask and this can be customized using slotChar option.
<InputMask v-model="value" mask="99/99/9999" slotChar="mm/dd/yyyy" />
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 v-model="value" mask="(999) 999-9999? x99999" :autoClear="false" />
Theming
InputMask supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.
Resources
Visit the PrimeVue InputMask showcase for demos and documentation.