InputPhoneInternational KIT

On this page

See also

Allows to input phone number in international format

InputPhoneInternational is based on @maskito/phone and libphonenumber-js libraries.

libphonenumber is an ultimate phone number formatting and parsing library developed by Google .

This library collects the latest phone number rules from ITU documents, user bug reports, telecom company home pages and government telecommunication authorities. It is always up-to-date (for more than 10 years), and releases are published almost every month. It means that InputPhoneInternational has the robust source of truth!

Choose metadata

The first step is to choose the size of metadata .

The complete list of all phone rules is huge, so libphonenumber-js provides different "metadata" sets to provides a way to optimize bundle size by choosing between max , min (default value) and mobile sets.

Read in-depth description about every set .

Choose any countries

Parameter countries allows you to choose which countries user can select from the dropdown.

You can even pick all possible countries by built-in utility getCountries from libphonenumber-js .

Use TuiSortCountriesPipe to sort countries according to your current language.

Phone number

Customize with icons

You can put static Icon or even interactive Tooltip at the right side of the textfield.

Phone number

Customize separator

Using tuiInputPhoneInternationalOptionsProvider you can provide custom separator for input instead of the default - .

Type your number

Use phone format helpers

InputPhoneInternational internally uses Maskito to format phone number.
Don't hesitate to use it too to manually format any phone number.

Phone: +1 212 555-2368

GitHub StackBlitz