Skip to content

Masked Input Element ​

The live masked field uses the jQuery Masked Input plugin.

Common Configuration Properties ​

PropertyTypeDescription
typeStringMust be "masked"
labelStringField label
modelStringModel key that stores the input value
placeholderStringPlaceholder text
disabledBooleanDisables the input
readonlyBooleanMakes the input read-only
fieldOptions.maskStringMask pattern passed to $(el).mask(...)
fieldOptions.maskOptionsObjectOptional plugin options passed as the second argument

Example Schema Snippet ​

json
{
  "type": "masked",
  "label": "Phone Number",
  "model": "userPhoneNumber",
  "placeholder": "(999) 999-9999",
  "fieldOptions": {
    "mask": "(999) 999-9999"
  }
}

Runtime Notes ​

  • The component requires the jQuery Masked Input library to be loaded globally.
  • On mount, the component runs unmask().mask(fieldOptions.mask, fieldOptions.maskOptions).
  • On destroy, it removes the mask with unmask().

Full Property Reference ​

This element is implemented in the sibling vue-form-generator source as fieldMasked.vue and uses the jQuery Masked Input plugin.

Klai Studio documentation