Laravel Phone Input Component

Free · MIT

A telephone number and its country code, both real form controls, posted as one.

A Phone Input built for the TALL stack — Blade, Livewire 3 & 4, Alpine.js and Tailwind CSS 4. Server-rendered by default and dark-mode ready. Aura's solid-background and border colours are contrast-tested against WCAG 2.1 AA/UI in CI, in both themes — see what's covered. Drop it in with a single Blade tag: <x-aura::phone-input>

Try it live in the docs Install free

Installation

composer require bluestarsystem/aura-ui

Usage

<x-aura::phone-input label="Mobile" />

See the full API, props and live examples in the Phone Input documentation.

Overview

<x-aura::phone-input> puts the dialling code in a real <select> with its own accessible name, the number in a real type="tel" field, and posts the two joined: +39 followed by the digits.

The usual version of this is a flag in a menu that is not a form control, a number that posts without its prefix, and no way for a screen reader to say which country is selected. There are no flags here on purpose — a flag is not a language and not a dialling code, and the three disagree often enough to matter.

Props

Prop	Type	Default	Description
`label`	`string\|null`	`null`	Tied to the number field with `for`.
`name`	`string`	`'phone'`	The hidden field's name; carries the full number.
`value`	`string\|null`	`null`	Split into prefix and national part when it starts with `+`.
`default`	`string`	`'IT'`	Which country is selected when there is nothing to split.
`countries`	`array\|null`	`null`	`['IT' => ['+39', 'Italy'], …]`. Defaults to the EU plus UK, Switzerland and the US.
`hint`, `error`	`string\|null`	`null`	Description and error text.