mother-maskv3.48.0
Menu

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:

index.ts
const uppercaseLetter = {
  match: /[a-z]/i,
  transform: (char: string) => char.toUpperCase(),
}
const uppercaseAlphanumeric = {
  match: /[a-z0-9]/i,
  transform: (char: string) => char.toUpperCase(),
}

CPF

index.ts
bind(input, '999.999.999-99')
11 digits

CNPJ (alphanumeric)

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

CEP

index.ts
bind(input, '99999-999')
8 digits

Phone — array mask

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

Date — segmented (default)

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

Date — flat (segmented: false)

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

Date — eager (default)

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

Date — not eager (eager: false)

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

Date — one or two digits ({min,max})

index.ts
bind(input, '9{1,2}/9{1,2}/9{4}')
type "3/4/1986" — the "/" you type commits the short segment

Time

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

License plate

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

Mercosul plate

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

Credit card — array mask

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

Currency (USD-style)

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

Currency (EUR-style)

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

Whole numbers

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

Negative values

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

Masked value vs. raw value

index.ts
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—