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.
Phone number
v4.0.0
The phone number field is a specialized text field enabling quick phone number entry.
Performant
Forms allow users to complete fields effortlessly.
Accessible
Anyone, no matter their abilities, can complete forms.
Dynamic
Forms provide dynamic feedback so users can correct errors quickly and confidently.
- Label
- Country dropdown
- Helper text
- Country code
- Value
- Field container
Label
The label is required for password fields and defaults to “Phone number”.
Country code dropdown
The country code dropdown reveals a list of all supported country codes. The chosen country code updates the formatting applied to the input value.
Country code value
The country code value updates according to chosen country code in the dropdown. If a phone number is pasted into the field with the country code included the dropdown will update and the input value formatting will adjust accordingly.
Input value
The input value is formatted according to the country code as characters are entered. The value is validated immediately when the field loses focus.
Value formatting
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.
Country code value
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.
Small native
On smaller native screens, the button opens a fullscreen overlay with an indexed list of countries.
Small web
On smaller web screens, the button opens a large dialog sheet.
Medium and large
On medium and large screens, the dropdown opens a scrollable popover menu. Touch devices reveal a numerical keyboard where possible for the input value.
Modality
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.
