Phone number
v4.0
The phone number field is a specialized text field enabling quick phone number entry.
- CSS
- Marko
- React
The label is required for password fields and defaults to “Phone number”. The label can be set to stacked or floating.
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 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.
The input value is formatted according to the country code as characters are entered. The value is validated immediately when the field loses focus.
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.
