7.6 kB
Ship less
Only 7.6 kB min+gz, with zero runtime dependencies.
Input masks that feel effortless
A tiny, fully typed TypeScript library for formatting input that stays natural while people type, paste, and edit. Zero dependencies. 7.6 kB.
Get started
npm install mother-maskWhy mother-mask
Engineered for performance, flexibility, and polish.
Multiframework
Meet users anywhere
One core API with dedicated bindings for every major framework — React, Vue, Angular, Svelte, Solid, Web Components, and more.
Flexible
Model real formats
Compose custom tokens, character transforms, locale-aware decimals, and content-dependent masks.
Natural
Respect the caret
Cursor position, pasting, and selection edits behave exactly as they would in a native input — no jumping caret, no lost keystrokes.
Interactive Playground
Try it live
Preview how masks behave in a real form, then inspect the lightweight binding code on the right.
Brazilian Masks
Phone+55 (99) 99999-9999
CPF999.999.999-99
CNPJAA.AAA.AAA/AAAA-99
main.ts
import { bind } from 'mother-mask'
const input = document.querySelector<HTMLInputElement>('#pg-br-phone')!
bind(input, '+55 (99) 99999-9999')US Formats
US Phone+1 (999) 999-9999
Credit Card9999 9999 9999 9999
USD CurrencyDecimal USD
main.ts
import { bind } from 'mother-mask'
const input = document.querySelector<HTMLInputElement>('#pg-us-phone')!
bind(input, '+1 (999) 999-9999')Decimal Masks
EUR CurrencyDecimal EUR
AmountQuantity units
4-Digit FloatScientific precision
main.ts
import { bindDecimal } from 'mother-mask'
const input = document.querySelector<HTMLInputElement>('#pg-eur')!
bindDecimal(input, {
prefix: '',
suffix: ' \u20AC',
separator: '.',
decimalSeparator: ',',
decimalPlaces: 2,
})Framework Support
Framework Integrations
Pick a framework below to see its install command and a full integration example.
PaymentForm.tsx
import { useState } from 'react'
import { InputMask, InputDecimal, formatDecimalValue } from 'mother-mask/react'
// Keep option objects and mask arrays stable across renders.
const currency = { decimalPlaces: 2, prefix: '$', allowNegative: true }
export function Form() {
const [phone, setPhone] = useState('')
const [amount, setAmount] = useState('')
return (
<>
<label htmlFor="phone">Phone</label>
<InputMask
id="phone"
name="phone"
mask="(99) 99999-9999"
inputMode="tel"
value={phone}
onValueChange={setPhone}
/>
<label htmlFor="amount">Amount</label>
<InputDecimal
id="amount"
name="amount"
options={currency}
value={amount}
onValueChange={setAmount}
/>
<button type="button" onClick={() => setAmount(formatDecimalValue(1234.5, currency))}>
Set amount
</button>
</>
)
}