Examples
Every field below is live. “Complete” means the expected number of characters is present, not that a date, checksum, card, or identifier is valid. Validate those separately in your application.
Examples that normalize case share these local token definitions:
const uppercaseLetter = {
match: /[a-z]/i,
transform: (char: string) => char.toUpperCase(),
}
const uppercaseAlphanumeric = {
match: /[a-z0-9]/i,
transform: (char: string) => char.toUpperCase(),
}CPF
bind(input, '999.999.999-99')11 digitsCNPJ (alphanumeric)
bind(input, 'AA.AAA.AAA/AAAA-99', { tokens: { A: uppercaseAlphanumeric } })12 alphanumeric + 2 digitsCEP
bind(input, '99999-999')8 digitsPhone — array mask
bind(input, ['(99) 9999-9999', '(99) 99999-9999'])10 or 11 digits — mask switches automaticallyDate — segmented (default)
bind(input, '99/99/9999')select "12" and retype — day and year stay putDate — flat (segmented: false)
bind(input, '99/99/9999', { segmented: false })same edit here pulls the year forwardDate — eager (default)
bind(input, '99/99/9999')type "25" — the "/" appears before you type itDate — not eager (eager: false)
bind(input, '99/99/9999', { eager: false })type "25" — the "/" waits for the next digitDate — one or two digits ({min,max})
bind(input, '9{1,2}/9{1,2}/9{4}')type "3/4/1986" — the "/" you type commits the short segmentTime
bind(input, '99:99')simple HH:MM bind maskLicense plate
bind(input, 'ZZZ-9999', { segmented: false, tokens: { Z: uppercaseLetter } })letters then digitsMercosul plate
bind(input, 'ZZZ-9Z99', { tokens: { Z: uppercaseLetter } })letter/digit mixed patternCredit card — array mask
bind(input, ['9999 999999 99999', '9999 9999 9999 9999'])15 or 16 digits; length selects the layoutCurrency (USD-style)
bindDecimal(input, { decimalPlaces: 2, prefix: '$' })Currency (EUR-style)
bindDecimal(input, { decimalPlaces: 2, separator: '.', decimalSeparator: ',', suffix: ' €' })"." also opens the fractionWhole numbers
bindDecimal(input, { decimalPlaces: 0, suffix: ' units' })Negative values
bindDecimal(input, { decimalPlaces: 2, prefix: '$', allowNegative: true })type "-" anywhere to flip the signMasked value vs. raw value
bind(input, '999.999.999-99', value => { document.getElementById('ex-raw-masked')!.textContent = value; document.getElementById('ex-raw-digits')!.textContent = value.replace(/\D/g, '')})masked
raw digits