php artisan aura:add phone-inputCopies the component source into resources/views/components/aura/. Run php artisan aura:init first if you haven't already. See the CLI guide for all options.
composer require bluestarsystem/aura-ui
php artisan aura:installFull installation instructions in the Installation guide.
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.
Basic Usage
<x-aura::phone-input label="Mobile" />A number that arrives international
Passing +393331234567 splits it: the select lands on Italy and the field holds the national part,
so nobody types the prefix twice.
<x-aura::phone-input label="Mobile" value="+393331234567" />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. |
Accessibility
- The select carries
aria-label="Country code": without a name it is announced as "combo box" and nothing else. autocomplete="tel-national"on the number, so a browser fills the right half.- The value that posts is the whole number, never the half that was typed.