Phone number
v4.0
The phone number field is a specialized text field enabling quick phone number entry.
- CSS
- Marko
- React
The phone number field is a specialized text field enabling quick phone number entry.
Required. The label defaults to “Phone number.”
Available in stacked or floating layouts.
The country code dropdown reveals a list of all supported country codes. The chosen country code updates the formatting applied to the input value.
The country code updates automatically based on the country selected in the dropdown. If a phone number is pasted with a country code included, the dropdown and input value will update to match.
The value is the user's phone number, formatted automatically as they type based on the selected country code.
Optional. Helper text communicates specific formatting requirements for entering a phone number.
Error messages appear below the field when the input doesn't meet the required format or conditions. The error message replaces any existing helper text.
Keep the tone neutral, don’t blame or scare the user. Clearly inform users the requirements so they know how to fix it.
The input value is automatically formatted according to the country code selected. This groups the values to make it easier to read and reduce the chance of making errors.
The country code value is a dynamic text field that updates according to the country selected or the number pasted into the field. Choosing a country from the dropdown updates the country code. Pasting a value will remove the country code from the input value and replace the country code value.
On smaller native screens, the button opens a fullscreen overlay with an indexed list of countries.
On smaller web screens, the button opens a large dialog sheet.
On medium and large screens, the dropdown opens a scrollable popover menu. Touch devices reveal a numerical keyboard where possible for the input value.
Do display the country code list in a fullscreen overlay on compact views. This allows for additional features like search and the native index on iOS.
Don’t display the country code list in a bottom sheet or popover on compact views. This increases the effort required to locate an item and doesn’t support complex interactions like search and index.
