How to set country priority in International Telephone Input.

In this article, We will be going to learn how to set the country priority in Telephone Input by using intlTelInput js.

Step 1: Create input type ‘tel’ field in HTML Form.

<form action-xhr="#">
   <input type='tel' id='phone' name='phone' maxlength='100'></input>
</form>

Step 2: Link intlTelInput JS and CSS.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>

Step 3: And then add the script of intlTelInput.

var input = document.querySelector("#phone"); // use your input tel id to select element
window.intlTelInput(input, {
    utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js"
});

Here you can see how the input field looks without priority.

Step 4: Use ‘preferredCountries’ parameter of  intlTelInput.

var input = document.querySelector("#phone");
window.intlTelInput(input, {
   preferredCountries: ["IN"],
   utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js"
});

Here you can see the result:

I hope this blog will solve your issue. If you have any type of issue please add it to the comment box I will solve all issues as soon as possible.

Thank you.