maska/docs/v3/svelte.md

Usage with Svelte

Maska provides simple Svelte action for use with input:

<input use:maska={options}>

• options is object with default options

Minimal example

Apply maska action to the input along with data-maska attribite:

<script>
  import { maska } from '@maskajs/svelte'
</script>

<input use:maska data-maska="#-#">

Set mask options

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

<script>
  import { maska } from '@maskajs/svelte'

  const options = {
    mask: "#-#",
    eager: true
  }
</script>

<input use:maska={options} data-maska-reversed>

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.