Vitral 0.2
Form

InputMask

A text box that types into a pattern, such as a phone or a date, filling in the literals for you.

WAI-ARIA tested

Import

main.ts
import { InputMask } from '@vitral/vue';

Basic

Value: — 
<script setup lang="ts">import { InputMask, Label, StackPanel } from '@vitral/vue';import { ref } from 'vue'; const phone = ref('');const done = ref(false);</script> <template>    <StackPanel spacing="0.375rem" style="min-width: 16rem">        <Label for="mask-phone">Phone</Label>        <InputMask id="mask-phone" v-model="phone" mask="(999) 999-9999" placeholder="(999) 999-9999" autocomplete="tel-national" @complete="done = true" />        <small style="color: var(--vt-text-muted-color)">Value: {{ phone || '—' }} {{ done ? '· complete' : '' }}</small>    </StackPanel></template>

Unmasked value

v-model: —
<script setup lang="ts">import { InputMask, Label, StackPanel } from '@vitral/vue';import { ref } from 'vue'; const cpf = ref('');</script> <template>    <StackPanel spacing="0.375rem" style="min-width: 16rem">        <Label for="mask-cpf">CPF</Label>        <InputMask id="mask-cpf" v-model="cpf" mask="999.999.999-99" unmask />        <small style="color: var(--vt-text-muted-color)">v-model: {{ cpf || '—' }}</small>    </StackPanel></template>

Slot characters and optional parts

<script setup lang="ts">import { InputMask, Label, StackPanel } from '@vitral/vue';import { ref } from 'vue'; const date = ref('');const serial = ref('');</script> <template>    <StackPanel orientation="horizontal" spacing="0.75rem" align="start" wrap>        <StackPanel spacing="0.375rem" style="min-width: 16rem">            <Label for="mask-date">Date</Label>            <InputMask id="mask-date" v-model="date" mask="99/99/9999" slot-char="mm/dd/yyyy" />        </StackPanel>        <StackPanel spacing="0.375rem" style="min-width: 16rem">            <Label for="mask-serial">Serial (last two optional)</Label>            <InputMask id="mask-serial" v-model="serial" mask="aa-9999?-**" :auto-clear="false" />        </StackPanel>    </StackPanel></template>

Sizes and states

<script setup lang="ts">import { InputMask } from '@vitral/vue';</script> <template>    <InputMask mask="999" size="small" aria-label="Small" />    <InputMask mask="999" variant="filled" aria-label="Filled" />    <InputMask mask="999" invalid aria-label="Invalid" />    <InputMask mask="999" disabled model-value="123" aria-label="Disabled" /></template>

API

Read from packages/vue/src/components/InputMask/types.ts, so it says what the component actually accepts.

Props

NameTypeDescription
mask *stringThe pattern: `9` takes a digit, `a` a letter, `*` either; anything after `?` is optional; every other character is typed for the reader.
slotCharstringWhat an empty slot shows: one character, or a string as long as the mask (`'mm/dd/yyyy'`). Defaults to `_`.
autoClearbooleanClear an unfinished value when the box loses focus. Defaults to true.
unmaskbooleanv-model receives only the typed characters, without the literals.
definitionsRecord<string, RegExp>Extra slot characters, each with the characters it accepts.
sizeSize—
variantInputVariantDefaults to the plugin's `inputVariant`.
invalidboolean—
disabledboolean—
readonlyboolean—
fluidboolean—

Plus pt, dt and unstyled from BaseProps, see pass-through and unstyled mode.

Emits

EventPayloadDescription
completeevent: { originalEvent: Event; value: string }Every required slot is filled.
focusevent: FocusEvent—
blurevent: FocusEvent—

Used in these templates