TallStackUI, Alpine Integration.

# Concept

Since TallStackUI is a library focused on the TALL Stack, which in turn makes use of AlpineJS to handle all JavaScript, you can use AlpineJS masks in your components, through the AlpineJS Mask plugin, which is delivered by default with Livewire 3.

# Maskable Inputs

Birthday

Insert your birthday

Salary

Insert your desired salary

Credit Card

Insert your credit card number

<x-input label="Birthday"
         hint="Insert your birthday"
         x-mask="99/99/9999" 
         value="27/02/1992" />
 
<x-input label="Salary"
         hint="Insert your desired salary"
         x-mask:dynamic="$money($input, ',')" 
         value="200.000" />
 
<!-- Custom Dynamic Mask -->
 
<x-input label="Credit Card"
         hint="Insert your credit card number"
         x-mask:dynamic="creditCardMask" 
         value="200.000" />
 
<script>
function creditCardMask(input) {
    return input.startsWith('34') || input.startsWith('37')
        ? '9999 999999 99999'
        : '9999 9999 9999 9999'
}
</script>

# Mozilla Firefox Issue

Although the AlpineJS plugin works great, there is a small issue detected for Mozilla Firefox browsers. As part of a workaround, you can use the code tip in this AlpineJS GitHub discussion.