---
schema_version: "1"
id: 9dc06998fa6a76a534c5cccead88d3f092e0a2b6b37d2f690c66aba6096da9cc
title: Formatted Phone
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/lightning-base-components/lightning-design-system/guides/lwc/components/lightning/formattedPhone/lightning-formatted-phone.md
canonical_url: https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lightning-formatted-phone.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 4dad389964e38c35983f31fd760d00edace8afc9306a76f0aa158c2f4ac61c72
products:
  - Lightning Component Reference
---

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

<!-- prettier-ignore-start -->
```html
<template>
    <p>
        <lightning-formatted-phone value="4255550155">
        </lightning-formatted-phone>
    </p>
    <p>
        <lightning-formatted-phone value="14255550155">
        </lightning-formatted-phone>
    </p>
</template>
```
<!-- prettier-ignore-end -->

The previous example renders the following HTML.

<!-- prettier-ignore-start -->
```html
<a href="tel:4255550155">(425) 555-0155</a>
<a href="tel:14255550155">(425) 555-0155</a>
```
<!-- prettier-ignore-end -->

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.

<!-- prettier-ignore-start -->
```html
<template>
    <p>
        <lightning-formatted-phone value="+14255550155">
        </lightning-formatted-phone>
    </p>
</template>
```
<!-- prettier-ignore-end -->

The previous example renders this HTML.

<!-- prettier-ignore-start -->
```html
<a href="tel:+14255550155">+14255550155</a>
```
<!-- prettier-ignore-end -->

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.

<!-- prettier-ignore-start -->
```html
<template>
    <lightning-formatted-phone
        value="18005551212"
        disabled
    ></lightning-formatted-phone>
</template>
```
<!-- prettier-ignore-end -->

## LWC Recipes

The [LWC Recipes GitHub repository](https://github.com/trailheadapps/lwc-recipes) 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](https://developer.salesforce.com/docs/atlas.en-us.object_reference.meta/object_reference/field_types.htm)


:::::

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

:::::

::::::