FormInputMask

A FormKit wrapper for OpenVue's InputMask component.

Live Example on Website

Usage

<FormKit type="formInputMask" v-model="value" mask="99-999999" />

Object-based Example

<script setup>
const schema = [
  {
    $formkit: 'formInputMask',
    name: 'myInputMask',
    label: 'Input Mask',
    validation: 'required',
    validationVisibility: 'live',
    mask: '99-999999',
    placeholder: '##-######'
  },
  {
    $formkit: 'formInputMask',
    name: 'custom',
    label: 'Input Mask',
    mask: '(999) 999-9999',
    iconPrefix: 'oi oi-check',
    iconSuffix: 'oi oi-check'
  },
  {
    $formkit: 'formInputMask',
    name: 'phone',
    label: 'Phone',
    mask: '+1 (999) 999-9999',
    placeholder: '+1 (###) ###-####',
    validation: 'required',
    validationVisibility: 'live'
  },
]
const data = {}
</script>

<template>
  <FormKit :schema="schema" :data="data" />
</template>

Props

Name	Type	Description
mask	string	Input mask pattern
slotChar	string	Slot character
autoClear	boolean	Auto clear input
unmask	boolean	Return unmasked value
pt	object	Pass-through options
ptOptions	object	Pass-through options
unstyled	boolean	Disable default styles
invalid	boolean	Mark as invalid
variant	string	Visual variant
size	string	Input size

See OpenVue InputMask docs for more details.