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>

Using with Livewire

wire:model

The examples above are the frontend (Blade + Alpine) usage. Inside a Livewire component, bind wire:model for two-way state — same component, no wrappers. Full Livewire guide →

app/Livewire/Demo.php

use Livewire\Component;

class Demo extends Component
{
    public string $card = '';

    public function render()
    {
        return view('livewire.demo');
    }
}

resources/views/livewire/demo.blade.php

<x-ui.input-mask mask="9999 9999 9999 9999" wire:model="card" />

API Reference

Props, slots and exposed methods for <x-ui.input-mask>.

Props

Prop	Type	Default	Description
`mask`*	`string`	`''`	The mask pattern. Use 9 for a digit, a for a letter, * for an alphanumeric character; any other character is a fixed literal inserted as the user types (e.g. "99/99/9999", "(999) 999-9999").
`value`	`string`	`''`	Initial value. It is run through the mask once on init so the field starts formatted.
`id`	`string`	—	The id attribute, e.g. to pair the field with a label.
`name`	`string`	—	The form field name submitted with the (masked) value.
`placeholder`	`string`	—	Placeholder text shown when the field is empty.
`inputmode`	`string`	—	The HTML inputmode hint for the on-screen keyboard (e.g. "numeric" for digit-only masks).

* Required.

Methods

Available on the component's Alpine scope — call them from markup in the slot (e.g. @click="…").

Method	Description
`apply()`	Reformats the current field value against the mask. Runs automatically on init and on every input event.