Components

Input Mask

A text input that formats its value against a mask as you type.

php artisan blatui:add input-mask

{{-- Phone number mask. 9 = digit, a = letter, * = alphanumeric; other chars are literals. --}}
<div class="w-full max-w-sm">
    <x-ui.input-mask mask="(999) 999-9999" placeholder="(555) 123-4567" inputmode="numeric" />
</div>

Card

{{-- Card expiry + CVC. --}}
<div class="flex w-full max-w-sm gap-3">
    <x-ui.input-mask mask="99/99" placeholder="MM/YY" inputmode="numeric" aria-label="Expiry date" />
    <x-ui.input-mask mask="999" placeholder="CVC" inputmode="numeric" aria-label="CVC" class="max-w-24" />
</div>

Date

{{-- Date mask. --}}
<div class="w-full max-w-sm">
    <x-ui.input-mask mask="99/99/9999" placeholder="MM/DD/YYYY" inputmode="numeric" />
</div>

Postcode

{{-- Alphanumeric mask — letters (a) and digits (9) with a literal space. --}}
<div class="w-full max-w-sm">
    <x-ui.input-mask mask="aa99 9aa" placeholder="AB12 3CD" class="uppercase" />
</div>

Time

{{-- Time mask (HH:MM:SS). --}}
<div class="w-full max-w-sm">
    <x-ui.input-mask mask="99:99:99" placeholder="00:00:00" inputmode="numeric" />
</div>