maska/docs/v3/alpine.md

Usage with Alpine.js

Maska provides custom Alpine.js directive for use with input:

<input x-maska:argument.modifier="options">

• argument is a name of the bound variable (see example below)
• modifier modifier for bound variable value, could be one of:
  • masked (default): variable will get a masked value (as in v-model)
  • unmasked: variable will get an unmasked (raw) value
  • completed: variable will be boolean, showing that mask is completed
• options is object with default options

Minimal example

Apply xMaska directive to the input along with data-maska attribite:

<input x-maska data-maska="#-#">

Set mask options

To set default options for the mask, pass options via directive value:

<div x-data="{ options: { mask: '#-#', eager: true }}">
  <input x-maska="options" data-maska-reversed>
</div>

You can override default options with data-maska- attributes on the input. In the example above we set eager mode using options and reversed mode using data-maska-reversed attribute.

Bind value

To get masked value you can use standard x-model directive on the input. But if you want to access an unmasked (raw) value or get to know when mask is completed, you can use directive argument and (optionally) directive modifier:

<div x-data="{ maskedvalue: '', unmaskedvalue: '' }">
  <input x-maska:unmaskedvalue.unmasked data-maska="#-#" x-model="maskedvalue">

  Masked value: <span x-text="maskedvalue"></span>
  Unmasked value: <span x-text="unmaskedvalue"></span>
</div>

!> For correct work as directive argument, name of the bounded variable should be in lower case. So instead of unmaskedValue use unmaskedvalue or unmasked_value.