tinyval-mask

Zero-dependency input masks: phones, bank cards, dates, amounts, documents and custom patterns.

• ~1 kB gzip for a custom pattern, ~2.6 kB with a phone mask and field binding
• The caret doesn't jump, Backspace goes through brackets and dashes, pasting works in any format
• Pure mask / unmask functions work on the server too — e.g. to normalize phone numbers
• A v-mask directive for Vue: v-model gets the masked or unmasked (.raw) value, visible template +7 (___) ___-__-__
• Date masks reject day 32 and month 13

Install

npm install tinyval-mask

Try it

Phone — country by code: try +44 or +49

🇺🇸 United States

Unmasked value: ""

Card number

Unmasked value: ""

Amount

Unmasked value: ""

Date

Unmasked value: ""

Car plate (RU)

Unmasked value: ""

Signed number

Unmasked value: ""

Quick start

import { mask, unmask, attach } from 'tinyval-mask';
import { phone, card } from 'tinyval-mask/presets';

mask('89991234567', phone());          // '+7 (999) 123-45-67'
unmask('+7 (999) 123-45-67', phone()); // '79991234567'
mask('4276123456789012', card());      // '4276 1234 5678 9012'
mask('12ab34', '99-99');               // '12-34' — your own pattern

attach(document.querySelector('#phone'), phone()); // a mask on an <input>

<script setup lang="ts">
import { phone } from 'tinyval-mask/presets';
import { vMask } from 'tinyval-mask/vue';

const phoneMask = phone();
</script>

<template>
  <input v-model="form.phone" v-mask="phoneMask" />
</template>

Further reading

• Ready-made masks — phones of 28 countries, cards, dates, documents, amounts
• phoneAuto — country by the number's code, flag and country name
• Patterns — your own masks: tokens, optional parts, several variants
• What masks return — the value in the field, in v-model and in data
• Input field — how the caret, Backspace and pasting work
• Vue — v-mask, v-model, tinyval-vue and UI libraries
• Masks & validation — validating the value with tinyval