<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5HGSQD2L" height="0" width="0" style="display:none;visibility:hidden" title="GTM"></iframe>

Phone numbers

Definition

Phone numbers are contact information displayed in user interfaces to enable users to call a business, department, or support service.

Overview

Localization

Our source language is EN-US (US English). Remember to hand off designs to the Localization team.

Engineering notes

  • We don't yet have a library that will localize the format of phone numbers. Features like Intl do not support phone number formatting
  • Phone numbers will likely need to be formatted manually. Always follow the local convention for style, punctuation and sequence
  • Use the relevant guidelines shown in this documentation for manually written EN-US content

Structure

Use the standard US phone number format: (XXX) XXX-XXXX

  • Include a 3-digit area code
  • Place open and close parentheses before and after the area code
  • Insert a space after the close parentheses
  • Insert a hyphen after the first 3 digits of the remaining number
  • Don’t include the country code (1 or +1). Users are on country-specific sites, so this isn’t necessary

Instead of

  • (212)867-5309
  • 1.212.867.5309
  • 212 867 5309
  • +1 (212) 867-5309

Use

  • (212) 867-5309

Reference Component Guidelines for additional guidance around phone numbers in Forms.

Overview

Phone numbers should follow local conventions for style, punctuation and sequence. In EN-US, present phone numbers in alignment with the content patterns defined within Foundational Standards.

There are limited scenarios when phone numbers may need to be formatted differently, typically in relation to Forms.

Components

Form

Always strive to use our established content patterns in placeholder text, helper text and inline error messages.

Don’t assume users will format phone numbers the same way we do.

  • Whenever possible, input fields should accept all variations of phone number formatting (assuming requirements for number of digits and valid characters are met)
  • After the user has finished inputting the phone number, automatically update the displayed input to follow the preferred local content pattern

If a form field input is required to follow a specific format to be accepted (this should be avoided):

  • Present phone number information using the required format, even if it differs from the preferred content pattern
  • This makes it easier for users to enter an accepted phone number on the first try, reducing frustration and the possibility of triggering an error