Skip to main content

Advanced data entry

Phone numbers

A proposed pattern for standardizing phone number entry. This pattern is optional and currently being proposed for adoption.

Example 1

 

Example 2

Phone number

Using an optional plugin for formatting phone numbers

Plugin: International Telephone Input
A JavaScript plugin used for entering and validating international telephone numbers. This plugin adds a flag selector to any input, detects the user's country, displays relevant placeholders, and provides enhanced formatting/validation methods.

To initialize and use this plugin:

    
      <input type="tel" id="phone">
      <script src="path/to/intlTelInput.js"></script>
      <script>
      var input = document.querySelector("#phone");
      window.intlTelInput(input, {
        // Initialization options
      });
      </script>

Include from GitHub: https://github.com/jackocnr/intl-tel-input