data-mask

Format an input as the user types (Alpine’s x-mask). 9 accepts a digit, a a letter, * either; every other character is a literal that is inserted for the user.

Syntax

data-mask="(999) 999-9999"
data-mask="99/99/9999"
data-mask__dynamic="$country === 'US' ? '99999' : 'aa9 9aa'"

part
key	forbidden
value	required: the mask, or with __dynamic an expression that yields it

Modifiers

modifier	effect
__dynamic	evaluate the value as an expression; the mask follows the signals it reads (the same modifier every literal-valued directive has)

Fixed masks

phone, card, date

<div data-signals="{ phone: '', card: '', date: '' }">
  <div class="row"><input placeholder="(555) 123-4567" data-bind:phone data-mask="(999) 999-9999"> <input placeholder="card" data-bind:card data-mask="9999 9999 9999 9999"> <input placeholder="dd/mm/yyyy" data-bind:date data-mask="99/99/9999" style="width:7rem"></div>
  <pre data-text="JSON.stringify({ phone: $phone, card: $card, date: $date })"></pre>
</div>

Letters and wildcards

a and *

plate = , code =

<div data-signals="{ plate: '', code: '' }">
  <div class="row"><input placeholder="AB12 CDE" data-bind:plate data-mask="aa99 aaa" style="width:7rem"> <input placeholder="X7-Q2" data-bind:code data-mask="**-**" style="width:5rem"></div>
  <p>plate = <code data-text="$plate"></code>, code = <code data-text="$code"></code></p>
</div>

Dynamic mask

With __dynamic the mask is an expression and re-applies whenever a signal it reads changes.

__dynamic

USUKNL

postcode =

<div data-signals="{ country: 'US', postcode: '' }">
  <div class="row"><select data-bind:country><option>US</option><option>UK</option><option>NL</option></select>
    <input data-bind:postcode data-mask__dynamic="$country === 'US' ? '99999' : $country === 'NL' ? '9999 aa' : 'aa9 9aa'" placeholder="postcode"></div>
  <p>postcode = <code data-text="$postcode"></code></p>
</div>

Notes

The mask formats the value on every input event and dispatches a new input event when it changed, so data-bind on the same element sees the formatted text. applyMask(mask, raw) is exported from sigmx/plugins for use in JavaScript, for example to format server data the same way.

Register

import { mask } from 'sigmx/plugins'

Registering mask adds 281 bytes brotli (344 gzip, 701 minified) on top of the core. See bundle sizes.