Input Mask

Native text input driven by a typed pattern mask (phone numbers, dates, card numbers, codes).

Minimal setup

Use a Vue 3.5+ project with Vue SFC compilation configured (see Vite+ integration).

vp install @vizejs/ui

Add the public import below to <script setup lang="ts">. Components provide behavior without styles; the preview uses optional Paper styles.

import { MaskedInput } from "@vizejs/ui/input-mask";

Or copy the source into your project with vize lib pull input-mask (see Source Distribution).

Try it

This is the basic example maintained with the component source, using the public package imports. The preview adds the optional Paper styles.

Open the interactive example · Styling these components

Copy the example

<!-- Phone number field that masks digits as the user types and reports completion. -->
<script setup lang="ts">
import { ref, useId } from "vue";

import { MaskedInput, type InputMaskResult } from "@vizejs/ui/input-mask";

const phone = ref("");
const lastComplete = ref("");
const inputId = useId();
const hintId = useId();

function onComplete(result: InputMaskResult): void {
  lastComplete.value = result.masked;
}
</script>

<template>
  <div>
    <label :for="inputId">Phone number</label>
    <MaskedInput
      :id="inputId"
      v-model="phone"
      mask="(999) 999-9999"
      name="phone"
      autocomplete="tel-national"
      :aria-describedby="hintId"
      @complete="onComplete"
    />
    <p :id="hintId">Ten digits, area code first.</p>
    <output :for="inputId"
      >Digits: {{ phone || "none" }}. Last complete number: {{ lastComplete || "none" }}</output
    >
  </div>
</template>

API

MaskedInput

Source: src/families/form/input-mask/masked-input.vue

Props

Events

Exposed

Behavior

Normative state x input -> outcome table for masked-input.vue, the useInputMask composable, and the pure createInputMask engine (@vizejs/ui/input-mask). Every row is proven by the named test in input-mask.test.ts or input-mask-ssr.test.ts; compile-only assertions live in input-mask.types.test-d.ts.

Public extension contract

The subpath is tree-shakable and ships no CSS; those package contracts are pinned by distribution.test.ts, check:size, and check:tree-shaking.