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.

1<template>
2    <p>
3        <lightning-formatted-phone value="4255550155">
4        </lightning-formatted-phone>
5    </p>
6    <p>
7        <lightning-formatted-phone value="14255550155">
8        </lightning-formatted-phone>
9    </p>
10</template>

The previous example renders the following HTML.

1<a href="tel:4255550155">(425) 555-0155</a>
2<a href="tel:14255550155">(425) 555-0155</a>

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.

1<template>
2    <p>
3        <lightning-formatted-phone value="+14255550155">
4        </lightning-formatted-phone>
5    </p>
6</template>

The previous example renders this HTML.

1<a href="tel:+14255550155">+14255550155</a>

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.

1<template>
2    <lightning-formatted-phone
3        value="18005551212"
4        disabled
5    ></lightning-formatted-phone>
6</template>

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