Components

Phone Input

A phone number field with a searchable country-code selector.

php artisan blatui:add phone-input

No country found.

{{-- Country selector + national number. The country dropdown is searchable. --}}
<x-ui.phone-input name="phone" placeholder="(555) 000-0000" />

With Label

Phone number

No country found.

{{-- With a label and a non-default starting country. --}}
<div class="grid w-full max-w-xs gap-2">
    <x-ui.label for="phone-field">Phone number</x-ui.label>
    <x-ui.phone-input id="phone-field" name="phone" country="GB" placeholder="20 7946 0000" />
</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 $phone = '';

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

resources/views/livewire/demo.blade.php

<x-ui.phone-input wire:model="phone" />

API Reference

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

Props

Prop	Type	Default	Description
`name`	`string`	—	Name of the phone-number input. When set, two extra hidden inputs (<name>_country and <name>_dial) are submitted alongside it.
`id`	`string`	—	id attribute of the phone-number input, for associating an external label.
`value`	`string`	`''`	Initial national phone number (the part after the dial code).
`country`	`string`	`'US'`	ISO 3166 alpha-2 code of the country selected by default. Must match one of the built-in countries (US, GB, CA, AU, FR, DE, ES, IT, NL, BE, IN, JP, BR, MX, MA, AE).
`placeholder`	`string`	`'Phone number'`	Placeholder shown in the number field while empty.