Phone input

Takes a phone number with its country and dialling code.

Refined portWildPhoneInput.vueForms/Phone Input

Try it

Open the country list and choose. The flag and dialling code change together, and the number field doesn’t move.

21 555 0134

Country

Content

Error

Disabled

const phone = ref('+64215550134')

<WildPhoneInput
  v-model="phone"
  placeholder="412 345 678"
/>

When to use

Use it for any phone number, such as the mobile an SMS alarm is sent to.
Prefer it to one box with help saying “include the country code”. Picking the country from a list gets the code right.

Don’t use it

For a country on its own. Use Select.

Anatomy

A country selector and a number field, sharing one row and one frame style.

202 555 0134

+64

21 555 0134

+966

55 555 0134

<WildPhoneInput v-model="phone" />

The selector shows the flag and code; the list adds the name. Its width is fixed, so the number field never shifts.

Country list

Nine countries in alphabetical order, with no search.

+64

412 345 678

The dialling code comes before the name. Names are spelled out, because NA and SA are ambiguous as codes.

States

Only the half you’re using changes.

rest

+64

21 555 0134

hover

+64

21 555 0134

focus

+64

21 555 0134

open

+64

21 555 0134

error

+64

21 555 0134

disabled

+64

21 555 0134

Errors frame the number only, because a country picked from a list can’t be wrong. An open list gives the selector the focus edge.

Accessibility

The selector is a combobox named Country calling code, and each country is announced as the arrows reach it. An error is announced as soon as it appears.

Key	What it does
Tab	Moves to the country selector, then the number.
↓ / ↑	Opens the list, then moves through the countries.
Enter / Space	Opens the list, or chooses the highlighted country.
Escape	Closes the list and keeps focus on the selector.

Props

Prop	Type	Default	Description
modelValue	string	—	The whole number, dialling code first.
placeholder	string	'412 345 678'	An example number, shown while empty.
error	string	—	Message under the pair; frames the number.
disabled	boolean	false	Disables both halves.

Tokens

Token	Value	Where it lands
--radius-lg	8px	Both halves, and the country list.
--font-size-base	14px	The dialling code and the number.
--global-neutral-grey-600	#DCDCDE	Both borders at rest.
--global-neutral-grey-800	#ADACB0	A border on hover.
--global-neutral-grey-500	#E6E6E6	The list edge, and disabled borders.
--global-blue-1000	#1877F2	The active half’s border, and the tick.
--color-error	#E12121	The number’s border, and the message.
--global-neutral-grey-300	#F1F1F1	The highlighted country.
--global-blue-1100	#0C296A	The chosen country’s text.
--shadow-dropdown	0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04)	The country list.
--spacing-2	8px	Between the halves, and beside each flag.