Phone input

bs-phone-input is a phone-number field: a country picker with flags, a dial code that cannot be edited away, and as-you-type formatting. The bound value is E.164 — +32470123456 — or null while empty, so a form posts one canonical string.

Validation rules are loaded per calling code on first interaction, so a field costs about 20 kB gzip when the user reaches it and nothing before that. (phoneChange) reports valid as undefined until those rules arrive — deliberately, rather than claiming a number is valid before anything has checked it.

Basic usage

null

null

Localized country names

Country names come from Intl.DisplayNames, so they are localized and collated in the viewer's language at no download cost. Leave locale unset to follow the browser — the default, and what most apps should ship.

Restricting and pinning countries

null

Inside an input group

bs-input-group joins any mix of controls into one continuous field — including components that keep their own shadow root, which Bootstrap's own CSS cannot reach. The corners pair and the borders collapse either way.

Validation

Tick Required above and blur the empty field. The message is rendered inside the component's shadow root and referenced by aria-errormessage from the real input — a message in your own template could not be, because an IDREF does not cross a shadow boundary.

Keyboard

• Tab — two stops: the country picker, then the number field.
• In the picker: ↑/↓ to move, type a country name to jump to it, Enter to choose, Esc to close. Choosing a country moves focus to the number field.
• In the number field: Backspace/Delete always remove a digit, never a space or bracket, so one keypress is never swallowed by the formatter.
• Pasting or typing +44 … switches the country and strips the dial code.