Phone number
This component consists of a dropdown menu that allows users to quickly find and select their country or region. It displays the country flag alongside the corresponding country. It is also built with a simple text field in order to let the user complete their phone number.
Usage
Its principal function is to assist users in selecting their country code or region while inputting their phone number.
When to use
Use a phone indicator and country selector when you want your users to enter their phone number
Anatomy
Label: Text that indicate the information needed in this field
Input text: The text that type the user.
Input box: The frame that contains the text typed by the user.
The selected option: a default option when the user just displays the content, or the option selected by the user.
The list of options: text must be in one line. And if the user can scroll, it must be indicated. Information on the dropdown must be keep short and clear.
Label
The label must be understandable and short
The selected option
A preselected option should be used in order to encourage selection.
The list of options
The spelling of each country should be right, and the flag also displayed. This list is sort alphabetically and the most use response can also be place in first choice.
Placement
The phone indicator and country selector should be aligned with the rest of the element on the grid. The list of items must be aligned with the element that showed it. The user must be able to open the dropdown with pressing “Enter” and navigate into with the keyboard’s “arrow Up” and “Down” and select an item. The user can also close the dropdown by with “esc(ape)” key.