International phone number input
An international phone number input gives users a set of form fields to input phone number information for specific countries.
The pattern is a form that displays a relevant phone number field for a user-selected location. You can use it to provide consistent design when implementing International Phone Number Input interactions across your applications.
We provide design guidance on how you can use Salt form control components to achieve the pattern. Your team can take further steps that fall outside its scope. For example, check with your tech partners if it’s possible to autodetect user location using data that can support autogenerating number placeholders. You can also check if it's possible to save the entered number when the user changes the country.
Use the pattern when your user needs to enter a phone number for a specific country. This could be for contact or access request purposes, such as client detail collection processes or two-step verification/multi-factor authentication.
- The pattern consists of two form controls: a dropdown that displays country selection (with a country symbol component the user can expand or collapse), and an input that displays the phone number.
- When the user selects the country, the text input adornment in the phone number input displays the country code.
You can display the pattern using a stack layout as a column or a row.
A column layout has two form controls as a vertical column. We suggest using the stack layout for better visibility of the country name and the country code.
- We suggest using the full country name instead of the abbreviation because users may filter the selection by the country name.
A row layout has two form controls as a horizontal row. You can use the row layout when there's a need to save space.
When the country name is wider than the input, the name is truncated. In this case, we suggest using the column layout.
The country selection dropdown uses the list component and the country list should be in the alphabetical order.
If you need to expand the pattern or share feedback with us, please contact the team.