Custom mask

Syntax

Special tokens in the mask string:

const form = useForm({ defaultValues: { code: "" } })
 
const { code } = useViraMask({
  form,
  schema: {
    code: {
      mask: "aaa-999",
      transform: "uppercase",
    },
  },
})
 
const { rawValue, ...inputProps } = code
 
<input {...inputProps} placeholder="ABC-123" />

MaskOptions

Commonly used fields:

• mask: pattern string
• transform: uppercase | lowercase
• allowedChars / forbiddenChars
• displayPrefix: shown but not written to raw value (e.g. TR on IBAN)
• currency, dateFormat, alphaFormat, usernameFormat
• type, inputMode, autoComplete
• preset: override on top of a preset

resolveMask

For dynamic masks, resolveMask(value, allValues, schema) returns a new mask string (or undefined). Card (Amex) and CVV presets use this: they update the mask based on sibling fields.

{
  mask: "9999 9999 9999 9999",
  resolveMask: (value) => {
    const digits = value.replace(/\D/g, "")
    if (digits.startsWith("34") || digits.startsWith("37")) {
      return "9999 999999 99999" // Amex
    }
    return undefined
  },
}