Formatted Phone

A lightning-formatted-phone component displays a read-only representation of a phone number as a hyperlink using the tel: URL scheme. Clicking the phone number opens the default VOIP call application on a desktop. On mobile devices, clicking the phone number calls the number.

If your locale is set to English (United States) or English (Canada), a phone number with 10 or 11 digits that starts with 1 is displayed in the format (999) 999-9999.

Include a "+" sign before the number to display the number in the format +19999999999 instead.

Here are two ways to display (425) 555-0155 as a hyperlink.

The previous example renders the following HTML.

Here's how to prevent the US/Canada formatting and display the number with a + prefix, even when your locale is set to one of these locales.

The previous example renders the following HTML.

To display the phone number in plain text without a hyperlink, include the disabled attribute. Disabling the phone number also prevents setting focus on the phone number using the Tab key.

The LWC Recipes GitHub repository contains code examples for Lightning Web Components that you can test in an org.

For a recipe that uses lightning-formatted-phone, see the following components in the LWC Recipes repo.

• c-contact-tile
• c-event-bubbling