Mask Input
This is a Labs component. The API may change in future releases. Import from vuetify/labs/VMaskInput.
<template>
<v-mask-input
v-model="phone"
label="Phone Number"
mask="(###) ###-####"
/>
</template>
<script setup>
import { ref } from 'vue'
import { VMaskInput } from 'vuetify/labs/VMaskInput'
const phone = ref('')
</script>
The input mask pattern. Use # for numbers, A for letters, * for alphanumeric.
Returns the masked value instead of the unmasked value.
Mask Characters
# - Number (0-9)A - Letter (a-z, A-Z)* - Alphanumeric (0-9, a-z, A-Z)- Any other character - Literal delimiter
Examples
Phone Number
<template>
<v-mask-input
v-model="phone"
label="Phone Number"
mask="(###) ###-####"
placeholder="(555) 123-4567"
/>
</template>
<script setup>
import { ref } from 'vue'
import { VMaskInput } from 'vuetify/labs/VMaskInput'
const phone = ref('')
</script>
Credit Card
<template>
<v-mask-input
v-model="card"
label="Credit Card"
mask="#### #### #### ####"
placeholder="1234 5678 9012 3456"
/>
</template>
<script setup>
import { ref } from 'vue'
import { VMaskInput } from 'vuetify/labs/VMaskInput'
const card = ref('')
</script>
<template>
<v-mask-input
v-model="date"
label="Date"
mask="##/##/####"
placeholder="MM/DD/YYYY"
/>
</template>
<script setup>
import { ref } from 'vue'
import { VMaskInput } from 'vuetify/labs/VMaskInput'
const date = ref('')
</script>
Social Security Number
<template>
<v-mask-input
v-model="ssn"
label="SSN"
mask="###-##-####"
placeholder="123-45-6789"
/>
</template>
<script setup>
import { ref } from 'vue'
import { VMaskInput } from 'vuetify/labs/VMaskInput'
const ssn = ref('')
</script>
Letter Mask
<template>
<v-mask-input
v-model="code"
label="Product Code"
mask="AAA-###"
placeholder="ABC-123"
/>
</template>
<script setup>
import { ref } from 'vue'
import { VMaskInput } from 'vuetify/labs/VMaskInput'
const code = ref('')
</script>
Return Masked Value
<template>
<div>
<v-mask-input
v-model="phone"
label="Phone Number"
mask="(###) ###-####"
return-masked-value
/>
<div class="mt-2">Value: {{ phone }}</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
import { VMaskInput } from 'vuetify/labs/VMaskInput'
const phone = ref('')
</script>
With Validation
<template>
<v-mask-input
v-model="phone"
label="Phone Number"
mask="(###) ###-####"
:rules="[rules.required, rules.complete]"
/>
</template>
<script setup>
import { ref } from 'vue'
import { VMaskInput } from 'vuetify/labs/VMaskInput'
const phone = ref('')
const rules = {
required: value => !!value || 'Phone number is required',
complete: value => value?.length === 10 || 'Phone number must be complete'
}
</script>
Alphanumeric
<template>
<v-mask-input
v-model="serial"
label="Serial Number"
mask="****-****-****"
placeholder="AB12-CD34-EF56"
/>
</template>
<script setup>
import { ref } from 'vue'
import { VMaskInput } from 'vuetify/labs/VMaskInput'
const serial = ref('')
</script>
- The mask automatically inserts delimiter characters as the user types
- Pasting content is supported and will be formatted
- Backspace removes characters and respects delimiters
- The unmasked value (without delimiters) is returned by default
- Use
returnMaskedValue to get the formatted value with delimiters