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
A lightning-formatted-name component displays formatted names in a given
format and order. The locale set in the app's user preferences determines how
names are formatted and the order they are presented.
This example displays "Mr. John Middleton Doe The 3rd Jo" based on the
default English United States locale with the long format.
The format attribute determines the length of the name to be displayed.
| Format | Description | Example |
|---|---|---|
| short | Displays the first name and last name only. | John Doe |
| medium | Displays the first name, middle name, and last name only. | John Middleton Doe |
| long (default) | Displays 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 in the Salesforce Help.
To create a form that takes in user input for names, you can use the
lightning-input-name component, which displays a name compound field that
supports user input for salutation, suffix, and so on.
In Lightning Experience, the locale value corresponds to the Locale field on the Language & Time Zone page in the user's personal settings.
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).
If you don't specify the locale, lightning-formatted-name defaults to the user's locale in the org.
In this example, the userLocale property returns fr-FR based on the org user's settings.
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.