TallStackUI, Alpine Integration.

# Concept

TallStackUI was designed to work only with Livewire in version 3, and Livewire natively delivers AlpineJS in its core in this new version. Therefore, you can take advantage of everything that AlpineJS offers you, such as the Mask plugin. Let's take a look at some examples using the AlpineJS Mask plugin in the TallStackUI inputs.

# 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" />
 
<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.