Phone Input

Demo & usage

More examples

<sv-phone-input [(value)]="phone" />

<sv-phone-input [(value)]="phone" [(country)]="country" [countries]="['US', 'GB', 'CA']" />

<sv-phone-input [(value)]="phone" [(country)]="country" country="GB" />

<sv-phone-input [(value)]="phone" [(country)]="country" [plans]="myPlans()" />

// PhoneCountry: { code, name, dialCode, nationalDigits, groups?, nationalMask? }
// nationalDigits is a number or [min, max]; groups is cosmetic.

<sv-phone-input [(value)]="phone" (e164Changed)="store($event)" />

When to use

• Sign-up, checkout and profile forms that collect a phone number and benefit from an explicit country + matching mask.
• International products where a plain `tel` input leaves users guessing at the expected format.
• Domestic-only (US) forms — set `countries` to a single entry to hide the picker without losing the mask.

Async states

None — this component has nothing to load, so it has no loading, empty or error state to drive.

Outputs

Customization & theming

• Wraps `@styloviz/forms`' `sv-input-mask`, so `size`, `disabled` and `error` all pass through unchanged.
• `countries` accepts an array of ISO 3166-1 alpha-2 codes to narrow the picker; omit it for the full bundled set.
• Switching country re-groups the digits and updates the dial code shown in the picker — it no longer throws the typed number away, because the country code was never among the digits.
• `plans` replaces the bundled numbering data outright; each entry carries `nationalDigits` (a number or `[min, max]`), an optional cosmetic `groups`, and an optional `nationalMask` for punctuation a group list cannot express.
• `svNationalMask()`, `svLengthHint()`, `svGroupNational()` and `SV_E164_MAX_DIGITS` are exported for building the same checks elsewhere.
• `showExtension` adds a separate digits-only extension field, two-way bound through `[(extension)]`. It is kept OUT of `e164Changed` — E.164 has no extension — so store it in its own column.
• A leading country code is only stripped when the value says it is there — it opens with `+` or `00`, or has more digits than the plan allows — so an Indian mobile such as 91987 65432 keeps its leading 91.

Best practices

• Do: Constrain `countries` to the markets you actually serve — a shorter list is faster to scan and search.
• Do: Read the raw digits (via `rawChanged`, forwarded from `sv-input-mask`) for storage/validation, not the formatted `value`.
• Tip: The flag assets are bundled SVGs, not remote images — this component works offline and behind strict CSPs.
• Don't: Don't assume the mask alone validates the number — it constrains formatting, not deliverability.
• Do: Pass `plans` if you serve more than the eight bundled countries, or if you need today's data. The table compiled into a component is stale the day it ships.
• Do: Store `e164Changed`, not the formatted value. The grouping is cosmetic and varies with the plan.
• Don't: Don't treat the length hint as validation. It reports what the bundled plan expected; a library that updates on its own schedule is what tells you whether a number is real.

Accessibility

• The country picker is a labelled button (`aria-haspopup="listbox"`) opening a keyboard-navigable listbox — arrow keys move, Enter selects, Escape closes, and typing a letter jumps to the first country with that name (repeat it to cycle).
• Each flag is decorative (`aria-hidden`); the accessible name for each option is the country name, not the flag.
• The underlying `sv-input-mask` keeps its own label/error association, so the field remains a single accessible text input.