---
schema_version: "1"
id: 42f995714048e875099987e1b7acf1440ccf58d4fb8277c1d6578710f7acb452
title: Formatted Email
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/formattedEmail/lightning-formatted-email.md
canonical_url: https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lightning-formatted-email.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 1c6d43b53b5750bd8f7494fa56f28cddb005546cf2a294b89381c392a4342810
products:
  - Lightning Component Reference
---

# Formatted Email

**`lightning-formatted-email`**

Displays an email as a hyperlink with the mailto: 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="formattedEmail" model="lwc" namespace="lightning"}


:::::

:::::tab

A `lightning-formatted-email` component displays a read-only representation of
an email address as a hyperlink using the `mailto:` URL scheme. Clicking on
the email address opens the default mail application for the desktop or mobile
device.

This example displays an email address with an email icon. The email address
is displayed as the default label.

<!-- prettier-ignore-start -->
```html
<template>
    <lightning-formatted-email value="hello@example.com">
    </lightning-formatted-email>
</template>
```
<!-- prettier-ignore-end -->

This example prevents the display of the email icon.

<!-- prettier-ignore-start -->
```html
<template>
    <lightning-formatted-email value="hello@example.com" hide-icon>
    </lightning-formatted-email>
</template>
```
<!-- prettier-ignore-end -->

Multiple email addresses are supported. The label "Send a group email" is
displayed as a hyperlink in this example.

<!-- prettier-ignore-start -->
```html
<template>
    <lightning-formatted-email
        value="hello@example.com,email@example.com"
        label="Send a group email"
    >
    </lightning-formatted-email>
</template>
```
<!-- prettier-ignore-end -->

This example creates an email address with values for cc, subject, and email
body. The label is displayed as a hyperlink.

<!-- prettier-ignore-start -->
```html
<template>
    <lightning-formatted-email
        value="hello@example.com?cc=email@example.com&subject=My%20subject &body=The%20email%20body"
        label="Send us your feedback"
    >
    </lightning-formatted-email>
</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-email`, see the following components in the LWC Recipes repo.

- `c-nav-to-record`
- `c-wire-get-record-user`

## 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="formattedEmail" model="lwc" namespace="lightning"}

:::::

::::::