Mask Inputs

The v-mask-input component allows you to enforce a format on user input according to specific patterns. This is particularly useful for fields like phone numbers, credit cards, dates, and other formatted data.

Installation

Labs components require manual import and registration with the Vuetify instance.

import { VMaskInput } from 'vuetify/labs/VMaskInput'

export default createVuetify({
  components: {
    VMaskInput,
  },
})

Usage

At its core, the v-mask-input is a wrapper around v-text-field.

API

Guide

Masks are created using a combination of special tokens that define the allowed characters and their formatting. Each token represents a specific type of character input.

Available Tokens

Built-in Masks

Vuetify includes several pre-configured masks for common use cases:

useMask composable

The useMask composable provides a set of methods for working with masks.

  import { useMask } from 'vuetify'

  const mask = useMask({ mask: '####-####' })

  mask.mask('12345678') // 1234-5678
  mask.unmask('1234-5678') // 12345678
  mask.isValid('abc') // false
  mask.isValid('1234') // true
  mask.isComplete('1234') // false
  mask.isComplete('1234-5678') // true

Examples

Using Built in Masks

You can use the built-in masks by simply referencing their name. This is an example of a phone mask.

Using Custom Masks

You can create custom masks using the available tokens. This will create a mask that accepts 3 letters followed by 3 numbers (e.g., "ABC-123").

Using Custom Tokens

You can also define custom tokens for more specific input requirements:

IP Address

This example shows how to create a mask for IP addresses with validation:

Credit Card Form

A complete credit card form example with validation: