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.