MaskInput

MaskInput builds upon TInput by integrating IMask.js to provide input formatting capabilities — ideal for phone numbers, dates, credit cards, and other fields requiring fixed formatting.

Basic Usage

Use the mask prop to define the input format. v-model provides two-way binding with the formatted value.

<TMaskInput mask="000-0000-0000" placeholder="000-0000-0000"/>
<TMaskInput mask="00/00/0000" placeholder="00/00/0000"/>
<TMaskInput mask="0000 0000 0000 0000" placeholder="0000 0000 0000 0000"/>
<TMaskInput mask="00:00" placeholder="00:00"/>

Telephone Mask

Tabler's typical usage: telephone mask with international format.

<TMaskInput mask="(00) 0000-0000" placeholder="(00) 0000-0000" autocomplete="off"/>

Two-way Binding

v-model binds to the formatted value. Note that IMask returns the formatted string.

View Code

<script setup lang="ts">
import { ref } from 'vue'

const phone = ref('')
</script>
<template>
  <TMaskInput v-model="phone" mask="000-0000-0000" placeholder="000-0000-0000"/>
  <div>Formatted value: {{ phone }}</div>
</template>

Advanced Masks

The mask prop supports all IMask mask types, including number ranges and regex patterns.

View Code

<TMaskInput :mask="{ mask: Number, min: 0, max: 100 }" placeholder="0-100"/>
<TMaskInput :mask="{ mask: Number, min: 0, max: 100, scale: 0, suffix: '%' }" placeholder="0-100%"/>

Composing with TInput Features

TMaskInput inherits all TInput features including icons, sizes, rounded style, and validation states.

View Code

<TMaskInput size="lg" mask="000-0000-0000" placeholder="000-0000-0000"/>
<TMaskInput size="sm" rounded mask="000-0000-0000" placeholder="000-0000-0000"/>
<TMaskInput disabled mask="000-0000-0000" placeholder="000-0000-0000"/>
<TMaskInput validation="invalid" mask="000-0000-0000" placeholder="000-0000-0000"/>

API

TMaskInput Props

Prop	Description	Type	Default
mask	Mask rule (string or IMask config object)	string | Record<string, any>	—
type	Native input type	string	'text'
placeholder	Placeholder text	string	undefined
size	Input size	'sm' | 'lg'	undefined
rounded	Pill/rounded style	boolean	false
flush	Borderless style	boolean	false
disabled	Disabled state	boolean	false
readonly	Readonly state	boolean	false
maxlength	Max character length	number	undefined
name	Native name attribute	string	undefined
id	Native id attribute	string	undefined
autocomplete	Autocomplete hint	string	undefined
required	Whether required	boolean	false
prepend-icon	Prepend icon (Tabler icon component)	Icon	undefined
append-icon	Append icon (Tabler icon component)	Icon	undefined
prepend-text	Prepend text	string	undefined
append-text	Append text	string	undefined
validation	Validation state	'valid' | 'invalid'	undefined
block	Full width (w-100)	boolean	false

TMaskInput Emits

Event	Description	Callback
update:modelValue	Triggered when input value changes (formatted)	(value: string) => void

TMaskInput Slots

Slot	Description
prepend	Prepend content (appears before <input>)
append	Append content (appears after <input>)