V2? Coming soon! New components and lots of improvements.

Powerful suite of Blade components for TALL Stack apps.

Alpine Integration.

Native AlpineJS integration.

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.

Insert your birthday
Insert your desired salary
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>

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.

Code highlighting provided by Torchlight