v-mask
Updated on Sep 5, 2025 3 minutes to readThe v-mask directive applies a flexible input mask to form fields.
It ensures that the user can only type characters matching the mask pattern.
• Supported mask features
| Feature | Syntax | Description |
|---|---|---|
| Digit | 9 | 0–9 |
| Letter | a | A–Z, a–z |
| Alphanumeric | * | Letter or digit |
| Optional | [ ... ] | The block is optional |
| Repetition | {min,max} | Repeat preceding symbol or group |
| Alternative | (option1 \ option2) | User can enter one of the options |
| Literal characters | any other character | Preserved in input |
• Example
<template>
<div>
<!-- Phone -->
<input v-mask="(999) 999-9999" placeholder="(123) 456-7890"/>
<!-- Result: (123) 456-7890 -->
<!-- Date with optional time -->
<input v-mask="99/99/9999[ 99:99:99]" placeholder="DD/MM/YYYY HH:MM:SS"/>
<!-- Examples:
31/12/2025
31/12/2025 12:12:12 -->
<!-- Repeating letters/digits -->
<input v-mask="aa-9{1,4}" placeholder="AB-1234"/>
<!-- Examples:
AB-1
AB-1234 -->
<!-- Email-like pattern -->
<input v-mask="*{1,20}[.*{1,20}][.*{1,20}][.*{1,20}]@*{1,20}[.*{2,6}][.*{1,2}]"
placeholder="user.name@example.co"/>
<!-- Examples:
user@example.com
user.name@example.co
u.n@domain.co.uk -->
<!-- Alternative pattern -->
<input v-mask="(aaa)|(999)" placeholder="ABC or 123"/>
<!-- Examples:
ABC
123 -->
</div>
</template>• Example
| Pattern Type | Mask String | Example Input | Description |
|---|---|---|---|
| Phone number | (999) 999-9999 | (123) 456-7890 | Standard phone number |
| Date with optional time | 99/99/9999[ 99:99:99] | 31/12/2025 12:12:12 | Date with optional hours, minutes, seconds |
| Custom repeating letters/digits | aa-9{1,4} | AB-1 … AB-1234 | 2 letters + dash + 1–4 digits |
| Email-like | *{1,20}[.*{1,20}][.*{1,20}][.*{1,20}]@*{1,20}[.*{2,6}][.*{1,2}] | user.name@example.com | Flexible email pattern with optional subdomains |
| Alternative | (99.9) \ (X) | 12.3 or X | User can type one of several options |