The v-mask directive is applied directly to an InputText or native input. The mask pattern can be passed as a string shorthand or as a full options object. Use v-model on the host input for two-way binding.

Mask format can be a combination of the following definitions; a for alphabetic characters, 9 for numeric characters and * for alphanumberic characters. In addition, formatting characters like (, ), - are also accepted.

When the input does not complete the mask definition, it is cleared by default. Use autoClear option to control this behavior. In addition, ? is used to mark anything after the question mark optional.

Default placeholder for a mask is the underscore character. It can be customized by passing a slotChar in the directive options object.

The onChange callback is invoked on every value change with both the masked value and the rawValue without the mask formatting characters, so both can be accessed at the same time.

When autoClear is set to false, the incomplete value is preserved on blur instead of being cleared.

The v-mask directive integrates seamlessly with the PrimeVue Forms library when applied to a named InputText.

Screen Reader

Mask directive is used with a native input element that implicitly includes any passed attribute. Value to describe the component can either be provided via label tag combined with id attribute or using aria-labelledby, aria-label attributes.

Keyboard Support