Formatted Phone

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

If you set your org's locale to English (United States) or English (Canada), a phone number with 10 or 11 digits that starts with 1 uses the format (999) 999-9999.

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

Here are two ways to specify (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 this 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 when you use 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

Object Reference for the Salesforce Platform: Field Types