---
schema_version: "1"
id: 5f1a3648f2fd6b1cd34bce064a6055fa6c68b04762af219607a4b4d1d810af06
title: Formatted Name
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/formattedName/lightning-formatted-name.md
canonical_url: https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lightning-formatted-name.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: a20a86ddc49301b4e4bd5de7023f3b6cd24cee2816d1a58c2d42ee17cad3d264
products:
  - Lightning Component Reference
---

# Formatted Name

**`lightning-formatted-name`**

Displays a formatted name that can include a salutation and suffix.

**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="formattedName" model="lwc" namespace="lightning"}


:::::

:::::tab

A `lightning-formatted-name` component shows formatted names in a given
format and order. The locale you set in the app's user preferences determines how
the component formats the names and how it presents the order of the names.

This example specifies "Mr. John Middleton Doe The 3rd Jo" based on the
default English United States locale with the `long` format.

<!-- prettier-ignore-start -->
```html
<template>
    <lightning-formatted-name
        first-name="John"
        middle-name="Middleton"
        last-name="Doe"
        informal-name="Jo"
        suffix="The 3rd"
        salutation="Mr."
    >
    </lightning-formatted-name>
</template>
```
<!-- prettier-ignore-end -->

The `format` attribute determines the length of the name.

| Format         | Description                                                                                     | Example                           |
| -------------- | ----------------------------------------------------------------------------------------------- | --------------------------------- |
| short          | Shows the first name and last name only.                                                        | John Doe                          |
| medium         | Shows the first name, middle name, and last name only.                                          | John Middleton Doe                |
| long (default) | Shows the name including salutation, first name, middle name, last name, suffix, informal name. | Mr. John Middleton Doe The 3rd Jo |

For more information on supported locales, see
[Supported Locales](https://help.salesforce.com/articleView?id=admin_supported_locales.htm)
in the Salesforce Help.

To create a form that takes in user input for names, you can use the
`lightning-input-name` component, which shows a name compound field that
supports user input for salutation, suffix, and so on.

## Use the Locale Information

In Lightning Experience, the `locale` value corresponds to the **Locale** field on the Language &amp; Time Zone page in the [user's personal settings](https://help.salesforce.com/s/articleView?id=xcloud.usersetup_lang_time_zone.htm).

By default, the org's locale setting determines the order of the name fields. If a user sets their personal locale setting, it overrides the org's locale setting.

For example, if you select "French (France)" in the **Locale** field, `lightning-formatted-name` uses `fr-FR` as the locale.

To enable your component to override the user's personal locale setting, set the `locale` attribute. Specify any locale code from the list of [Supported Number, Name, and Address Formats (ICU)](https://help.salesforce.com/s/articleView?id=xcloud.admin_supported_locales.htm).

<!-- prettier-ignore-start -->
```html
<template>
    <lightning-formatted-name
          first-name="John"
          middle-name="Middleton"
          last-name="Doe"
          suffix="The 3rd"
          salutation="Mr."
          locale="en-US">
    </lightning-formatted-name>
</template>
```
<!-- prettier-ignore-end -->

If you don't specify the `locale`, `lightning-formatted-name` defaults to the user's locale in the org.

<!-- prettier-ignore-start -->
```html
<template>
    <h2>User's locale: {userLocale}</h2>
    <!--No locale specified on lightning-formatted-name -->
    <lightning-formatted-name
          lwc:ref="name"
          first-name="John"
          middle-name="Middleton"
          last-name="Doe"
          suffix="The 3rd"
          salutation="Mr.">
    </lightning-formatted-name>
</template>
```
<!-- prettier-ignore-end -->

In this example, the `userLocale` property returns `fr-FR` based on the org user's settings.

```javascript
import { LightningElement } from "lwc";

export default class LocaleExample extends LightningElement {
  userLocale = "";

  renderedCallback() {
    this.userLocale = this.refs.name.locale;
  }
}
```

If you pass in an invalid locale, the component uses `en-US`. The locale supports both hyphens and underscores, for example, `en-US` or `en_US`.

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

:::::

::::::