Frameworks
Pick a framework below to see its install command and a full integration example. Every other page in these docs sticks to vanilla JS.
Vanilla JS
Bind native inputs after they exist, and dispose the bindings during teardown.
React
Use InputMask and InputDecimal with string state and onValueChange callbacks.
Vue
Use the vMotherMask and vMotherMaskDecimal custom directives on native inputs in a Vue single-file component.
Angular
Use the standalone MotherMaskDirective and MotherMaskDecimalDirective with two-way value binding.
Svelte
Use motherMask and motherMaskDecimal actions on native inputs in a Svelte 5 component.
Preact
Use InputMask and InputDecimal with string state and onValueChange callbacks.
Lit
Importing the adapter registers both Lit custom elements. Use this HTML in a module-aware app.
Stencil
Import each compiled custom element separately. Core helpers are available from mother-mask.
Alpine.js
Register the plugin before Alpine.start(); synchronize values with mask-change rather than x-model.
Web Components
Native custom elements require no framework peer dependency. Use this HTML in a module-aware app.
A standalone example app is not yet available. View the Web Components adapter →
Qwik
Use onValueChange$ callbacks in an app configured with the Qwik Optimizer.
Inferno
Use InputMask and InputDecimal class components in an Inferno JSX app with a root element.
Octane
Use InputMask and InputDecimal with string state and onValueChange callbacks.
Mithril.js
Use InputMask and InputDecimal with string state and onValueChange callbacks.
Ember.js
Use maskInput and maskDecimal modifiers in a Glimmer component with a .gjs template.
Knockout.js
Importing the adapter registers mask and maskDecimal bindings. Run the module after the markup exists.
Riot.js
Mount the pure maskInput and maskDecimal wrappers, then unmount them during parent teardown.
npm install mother-mask<label for="phone">Phone</label>
<input id="phone" type="text" inputmode="tel" />
<label for="amount">Amount</label>
<input id="amount" type="text" inputmode="decimal" />
<script type="module">
import { bind, bindDecimal } from 'mother-mask'
const phone = document.getElementById('phone')
const amount = document.getElementById('amount')
const disposePhone = bind(phone, '(99) 99999-9999')
const disposeAmount = bindDecimal(amount, { decimalPlaces: 2, prefix: '$' })
// During teardown:
// disposePhone()
// disposeAmount()
</script>