import InputMask from 'primevue/inputmask';
<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>
<script src="https://unpkg.com/primevue@^3/inputmask/inputmask.min.js"></script>
A model can be bound using the standard v-model directive.
<InputMask v-model="value" mask="99-999999" />
Mask format can be a combination of the the following built-in definitions.
<InputMask v-model="value" mask="a*-999-a999" />
Underscore is the default placeholder for a mask and this can be customized using slotChart option.
<InputMask v-model="value" mask="99/99/9999" slotChar="mm/dd/yyyy" />
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" />
InputText passes any valid attribute to the underlying input element. In addition;
| Name | Type | Default | Description |
|---|---|---|---|
| modelValue | any | null | Value of the component. |
| 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. |
Any valid event such as focus, blur and input are passed to the underlying input element.
Following is the list of structural style classes, for theming classes visit
| Name | Element |
|---|---|
| p-inputmask p-inputtext | Input element |
InputMask component renders a native input element that implicitly includes any passed prop. Value to describe the component can either be provided via label tag combined with id prop or using aria-labelledby, aria-label props.
<label for="date">Date</label>
<InputMask id="date" />
<span id="phone">Phone</span>
<InputMask aria-labelledby="phone" />
<InputMask aria-label="Age" />
| Key | Function |
|---|---|
| tab | Moves focus to the input. |
None.