Skip to main contenteBay Playbook

Phone number

v4.0

The phone number field is a specialized text field enabling quick phone number entry.

  • CSS
  • Marko
  • React
Stylized artwork of a phone number field.

Considerations

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.

Anatomy

Phone number field diagram with 6 elements numbered: 1. Label, 2. Country dropdown, 3. Helper text, 4. Country code, 5. Value, 6. Field container.
  1. Label
  2. Country dropdown
  3. Helper text
  4. Country code
  5. Value
  6. Field container

Properties

Label

Required. The label defaults to “Phone number.”

Available in stacked or floating layouts.

Two examples of a phone number phone number field. The first shows the label above the field, the second shows the label inside the field.

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.

A dropdown appears below a phone number field listing country codes: United Kingdom, United States of America, Uruguay, Uzbekistan, and Vietnam.

Country code 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.

‘+1’ value is shown in the phone number field.

Input value

The value is the user's phone number, formatted automatically as they type based on the selected country code.

‘(234) 567-8900’ value is shown in the phone number field.

Helper text

Optional. Helper text communicates specific formatting requirements for entering a phone number.

  • Use sentence case
  • No ending punctuation
  • Max one line
Helper text is showing under the phone number and reads, “Enter the phone number associated with your business”.

Error message

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.

  • Use sentence case
  • No ending punctuation
  • Avoid technical language or filler words like “please”, “sorry”, or “oops”
Helper text is showing under the phone number and reads, “Enter the phone number associated with your business”.

Behavior

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.

A full phone number ‘+1 (234) 567-8900’ is shown in the phone number field.

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.

Phone number input field with United Kingdom flag icon and +44 country code.

Screen sizes

Small native

On smaller native screens, the button opens a fullscreen overlay with an indexed list of countries.

Two mobile phone screens; a Payment options screen is shown on the eBay app, with an interaction indicator placed over the flag dropdown in the phone number field. A line connects the interaction indicator to the second screen, which shows a fullscreen overlay with a list of countries and country codes, with a search option on top.

Small web

On smaller web screens, the button opens a large dialog sheet.

A large dialogue sheet is featured on the eBay mobile web screen, listing countries with their country codes.

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.

On a larger eBay Account screen, a dropdown is featured under a phone number field listing countries and their country codes.

Best practices

Modality

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.

A fullscreen overlay with a list of countries and country codes is shown on the eBay mobile app.

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.

A bottom half sheet with a list of countries and country codes is shown on the eBay mobile app.

Specs

Phone number field specs are shown. The height of the field container is 48px, the space between the label and field container is 4px, the space between the field container and helper text is 8px, the padding inside of the right side of the field container is 16px, the padding on the right of the country selector is 8px, and the padding on the left and right of the value field is 8px.