Formatted Phone

lightning-formatted-phone

Displays a phone number as a hyperlink with the tel: URL scheme.

For Use In

Lightning Experience, Experience Builder Sites, Salesforce Mobile App, Lightning Out (Beta), Standalone Lightning App, Mobile Offline

::::::tabset{tabs='["Example", "Develop", "Specifications"]'}

:::::tab

::component-playground{component="formattedPhone" model="lwc" namespace="lightning"}

:::::

:::::tab

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.

<template>
    <p>
        <lightning-formatted-phone value="4255550155">
        </lightning-formatted-phone>
    </p>
    <p>
        <lightning-formatted-phone value="14255550155">
        </lightning-formatted-phone>
    </p>
</template>

The previous example renders the following HTML.

<a href="tel:4255550155">(425) 555-0155</a>
<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.

<template>
    <p>
        <lightning-formatted-phone value="+14255550155">
        </lightning-formatted-phone>
    </p>
</template>

The previous example renders this HTML.

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

<template>
    <lightning-formatted-phone
        value="18005551212"
        disabled
    ></lightning-formatted-phone>
</template>

LWC Recipes

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

See Also

Object Reference for the Salesforce Platform: Field Types

:::::

:::::tab ::component-specification{component="formattedPhone" model="lwc" namespace="lightning"}

:::::

::::::