Separate dial code option

Display the selected country dial code next to the input, so it looks like it's part of the typed number. Since the user cannot edit the displayed dial code, they may try to type a new one - in this case, to avoid having two dial codes next to each other, we automatically open the country dropdown and put the new dial code in the search input instead. So if they type +54, then Argentina will be highlighted in the dropdown and they can simply press Enter to select it, updating the displayed dial code. Play with this option on Storybook (using the React component).

Markup

<input id="phone" type="tel">

Code

const input = document.querySelector("#phone");
window.intlTelInput(input, {
  initialCountry: "gb",
  separateDialCode: true,
  loadUtils: () => import("/intl-tel-input/js/utils.js?1743167482095") // for formatting/placeholders etc
});