Mask Plugin (x-mask)

Format input fields as the user types (phone, date, credit card, etc.).

Mask Plugin

The @alpinejs/mask plugin adds the x-mask directive. It automatically formats the input value according to a pattern, while still keeping the raw value available for your Alpine data.

Installation & Usage

npm install @alpinejs/mask

import mask from '@alpinejs/mask'
Alpine.plugin(mask)

Common Masks

<input x-mask="999-999-9999" placeholder="Phone">
<input x-mask="99/99/9999" placeholder="Date">
<input x-mask="****-****-****-****" placeholder="Credit Card">

Mask Characters

• 9 – any digit (0‑9)
• a – any letter (a‑z, A‑Z)
• * – any character
• Other characters are treated as literals

Dynamic Masks

You can also bind the mask to a reactive expression, making it dynamic.

<input x-mask="dynamicMask">
<div x-data="{ maskType: 'phone' }">
  <input x-mask="maskType === 'phone' ? '999-999-9999' : '99/99/9999'">
</div>