Status
The status of the component
Component checklist
Ready for use!
Figma component
A link to the Figma library where the component lives.
Repository
A link to the repo where the component lives.
Best Practices and Usage Guidelines
Best practices
- The phone input should validate the phone that the user enters depending on the country selected.
- The dropdown menu containing the list of countries should allow the user to search for a specific country using the keyboard; i.e. if the user types “Mex” the selection will automatically jump to Mexico.
- The input should only allow numbers.
- The list of all supported countries should be in alphabetical order.
- The phone number that the user enters should be automatically separated by hyphens, so it increases legibility.
- The menu height should only allow to display up to 6 countries at a time.
- Whenever possible, the country should be automatically selected according to the user region by default, if we cannot get the user region, the selected option should fallback to unknown region.
Dos and Don’ts
Hi 👋! This is a variation of the text field.
Please check the text field documentation for the complete input’s Do’s and Dont’s.
Use clear labels
Do
Use clear and to-the-point language.
Don't
Limit the label length and do not use punctuation marks.
Use appropriate menu widths
Do
The dropdown menu should always display all the country names properly without trimming, no matter the size of the input.
Don't
Avoid Resizing the menu width outside of their min-widths.
Mask the number properly with hyphens
Do
The number that the user enters as well as the placeholder should always be masked with hyphens, so it’s easier for the user to read.
Don't
Avoid displaying the placeholder and the value the user enters without hyphens.
Related Components & Patterns