# Masked Input

A version of the <us-form-input> exists with masking, this allows for guided user input for things that require specific struct. For example; phone numbers, zip codes, social security numbers, etc.

This component uses the 3rd party library vue-the-mask (opens new window), and supports any of the masks shown here (opens new window).

You entered:

# Examples

Social Security Number Using the mask ###-##-####

Zip (US) Using the mask #####

Zip +4 (US) Using the mask #####-####

Date and time Using the mask ##/##/#### ##:##:##

Canada Zip Using the mask S#S #S#"

Vehicle Identification Using the mask XX.XX.XXXXX.X.X.XXXXXX

# Tokens

The follow tokens are allowed by default, though you can fully customize (see below). You can mix and match these to create more complex masks.

Character	Description	Pattern
#	Only numbers	{pattern: /\d/}
X	Only letters or numbers	{ pattern: /[0-9a-zA-Z]/ }
S	Only letters	{pattern: /[a-zA-Z]/}
A	Only letters, and convert to uppercase	{pattern: /[a-zA-Z]/, transform: v => v.toLocaleUppperCase()}
a	Only letters, and convert to lowercase	{pattern: /[a-zA-Z]/, transform: v => v.toLocaleLowerCase()}
!	Escape, allows you to escape the following masked character	{ escape: true }

# Custom tokens

You can also pass in other tokens, and even pass a custom transformer to customize how the the user input is converted. For example;

You entered:

<us-form-input-masked mask="FFFFF" placeholder="Enter a hex value"
    :tokens="{
        F: {
            pattern: /[0-9a-fA-F]/,
            transform: v => v.toLocaleUpperCase()
        }
    }"
    v-model="testToken"
/>

1
2
3
4
5
6
7
8
9

# Properties

Inherited for all form inputs;

Property	Type	Default	Description
v-model	string	null	The v-model prop
disabled	boolean	false	Disable the control
name	string	null	The input name
placeholder	string	null	The input name
debounce	boolean	false	Set to true to debounce input (to wait for a user to stop typing)
description	string	null	The input description
rules	object	null	Validation rules (see form validation docs)
valid	boolean	null	Allows you to manually control validation state
validation-mode	string	'aggressive'	Validation mode, see validation docs for details.
supress-error	boolean	false	Allow you to turn of the error string being displayed by validation

Additonal properties specific to this component;

Property	Type	Default	Description
type	string	'text''	The input type
mask	string	null	The mask to apply
tokens	object	see tokens section	Allows you to use a custom token and transformer

← Text Input Checkbox →