InputMask

Pattern-masked input (# A *)

For values with one fixed shape — a domestic phone number, a card number, a postcode, a product code. The literals appear as you type, anything that doesn't fit the next slot is dropped, and a paste is reformatted. For values whose length or shape varies (international phone numbers, emails), use Input with pattern instead: a mask that is wrong for someone's value locks them out.

Basic

Phone

masked: — · raw: —

Card

Plate

<script setup lang="ts">
import { ref } from "vue";
import { BlessInputMask, BlessLabel } from "blessing-ui";
const phone = ref("");
const raw = ref("");
const card = ref("");
</script>

<template>
  <div class="row" style="align-items: flex-start">
    <div class="col">
      <BlessLabel for="d-phone">Phone</BlessLabel>
      <BlessInputMask
        id="d-phone"
        v-model="phone"
        mask="###-####-####"
        @update:raw="raw = $event"
      />
      <small>masked: {{ phone || "—" }} · raw: {{ raw || "—" }}</small>
    </div>
    <div class="col">
      <BlessLabel for="d-card">Card</BlessLabel>
      <BlessInputMask id="d-card" v-model="card" mask="#### #### #### ####" />
    </div>
    <div class="col">
      <BlessLabel for="d-plate">Plate</BlessLabel>
      <BlessInputMask id="d-plate" mask="AA-## **" placeholder="AB-12 C3" />
    </div>
  </div>
</template>

• Tokens: # a digit, A a letter, * either. Anything else is a literal.
• v-model is the masked value (090-1234-5678), and that is what the form submits. @update:raw gives it with the literals stripped (09012345678).
• A mask with only # tokens sets inputmode="numeric", so phones show the number pad; pass inputmode to override.
• The placeholder defaults to the mask with _ in each slot.

Usage

import { BlessInputMask } from "blessing-ui";

API

Props

Name	Type	Default	Description
mask*	string	—	# digit · A letter · * letter or digit · anything else is a literal
placeholder	string	—	placeholder shown when empty; defaults to the mask with tokens as _
modelValue	string	""	the formatted value, e.g. "090-1234-5678"

Events

Name	Payload	Description
update:modelValue	[value: string]
update:raw	[raw: string]