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 digits

CNPJ (alphanumeric)

bind(input, 'AA.AAA.AAA/AAAA-99', { tokens: { A: uppercaseAlphanumeric } })12 alphanumeric + 2 digits

CEP

bind(input, '99999-999')8 digits

Phone — array mask

bind(input, ['(99) 9999-9999', '(99) 99999-9999'])10 or 11 digits — mask switches automatically

Date — segmented (default)

bind(input, '99/99/9999')select "12" and retype — day and year stay put

Date — flat (segmented: false)

bind(input, '99/99/9999', { segmented: false })same edit here pulls the year forward

Date — eager (default)

bind(input, '99/99/9999')type "25" — the "/" appears before you type it

Date — not eager (eager: false)

bind(input, '99/99/9999', { eager: false })type "25" — the "/" waits for the next digit

Date — 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 segment

Time

bind(input, '99:99')simple HH:MM bind mask

License plate

bind(input, 'ZZZ-9999', { segmented: false, tokens: { Z: uppercaseLetter } })letters then digits

Mercosul plate

bind(input, 'ZZZ-9Z99', { tokens: { Z: uppercaseLetter } })letter/digit mixed pattern

Credit card — array mask

bind(input, ['9999 999999 99999', '9999 9999 9999 9999'])15 or 16 digits; length selects the layout

Currency (USD-style)

bindDecimal(input, { decimalPlaces: 2, prefix: '$' })

Currency (EUR-style)

bindDecimal(input, { decimalPlaces: 2, separator: '.', decimalSeparator: ',', suffix: ' €' })"." also opens the fraction

Whole numbers

bindDecimal(input, { decimalPlaces: 0, suffix: ' units' })

Negative values

bindDecimal(input, { decimalPlaces: 2, prefix: '$', allowNegative: true })type "-" anywhere to flip the sign

Masked 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