Formatted Name

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.

1<template>
2    <lightning-formatted-name
3        first-name="John"
4        middle-name="Middleton"
5        last-name="Doe"
6        informal-name="Jo"
7        suffix="The 3rd"
8        salutation="Mr."
9    >
10    </lightning-formatted-name>
11</template>

The format attribute determines the length of the name.

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

1<template>
2    <lightning-formatted-name
3          first-name="John"
4          middle-name="Middleton"
5          last-name="Doe"
6          suffix="The 3rd"
7          salutation="Mr."
8          locale="en-US">
9    </lightning-formatted-name>
10</template>

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

1<template>
2    <h2>User's locale: {userLocale}</h2>
3    <!--No locale specified on lightning-formatted-name -->
4    <lightning-formatted-name
5          lwc:ref="name"
6          first-name="John"
7          middle-name="Middleton"
8          last-name="Doe"
9          suffix="The 3rd"
10          salutation="Mr.">
11    </lightning-formatted-name>
12</template>

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

1import { LightningElement } from "lwc";
2
3export default class LocaleExample extends LightningElement {
4  userLocale = "";
5
6  renderedCallback() {
7    this.userLocale = this.refs.name.locale;
8  }
9}

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.

Object Reference for the Salesforce Platform: Field Types