Phone number field component

[jshenkman]

Request from Valentina (AI)

Title:
Phone number field. Phone number field validation.

Problem:
While inserting a phone number to contacts that are not in the right format (with spaces, for example), the agent simply doesn't route the call instead of prompting the user.

Solution:
Auto-formatting the input with geolocation and input masking is the best way to present phone number fields.

Expected general behavior:
As users type their phone numbers, the proper format is displayed without any effort from the user.
Users don’t need to type any parenthesis, dashes, slashes, periods, or spaces, just numbers. The field has a numbers-only constraint to prevent validation errors if they type other characters.
Only the required number of digits are filled in input.
Geolocating the user’s country allows you to auto-format the phone number of every user no matter where they’re from. This also tells you what their country code is without having them type it in. This means less work for the user and a better conversion rate for you.
The country code should be displayed alongside the phone number so users know they don’t need to type it in. The most intuitive way to do this is to display an icon of the user’s country flag inside the text field next to their input.
It’s possible to allow users to change their country code if they want to enter an international phone number. Clicking the flag icon would display a dropdown menu with other country codes with a search field. Users be able to search country by country name and country code.

References from valued libraries:
https://intl-tel-input.com/
https://appleid.apple.com/account

Standart format for phone numbers
States of component
UI
Prototype (phone number validation)
Use cases: Contact (property), Send SMS (node), Call Routing(node), Tester

[yinonov]

As UI components are mainly responsible for the UI itself and its low level interface, this ask might not align with the objective and probably introduce unrelated concern.

Are there any struggles applying the mentioned libraries on the textfield component as is?