maska/docs/v3/svelte.md

# Usage with Svelte

Maska provides simple Svelte action for use with input:

```html
<input use:maska={options}>
```

- `options` is object with default options


## Minimal example

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

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

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


## Set mask options

To set default [options](/options) for the mask, pass options via **directive value**:

```svelte
<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.