InputPhoneInternational EXPERIMENTAL

Examples API Setup

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

Mobile dropdown

You can enable mobile specific dropdown design on mobile devices by adding `TuiDropdownMobile` directive.

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

Old syntax

This component has been refactored to maintain uniformity across new textfield components. Newest version is in the `@taiga-ui/experimental` package and will replace previous syntax in the next major release. Old syntax is displayed in the example below: