Overview
- Understand the purpose of custom label
- Create custom labels and add translation to it
- Import custom labels in the lightning web component
- Access custom labels in the lightning web component
What is Custom Label?
In Salesforce, a custom label is essentially a named text string that you can define and then reference throughout your Salesforce organization. They act as placeholders for text that you might use repeatedly in your application, such as button labels, error messages, or any other text-based content.
Accessing Custom Labels in LWC
import LabelName from '@salesforce/label/label-reference';
customLabelExample.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>54.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__RecordPage</target>
<target>lightning__AppPage</target>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>
customLabelExample.html
<template>
<form>
<div
class="slds-p-top_small slds-p-bottom_medium slds-align_absolute-center slds-theme_default slds-text-heading_medium">
<b>Custom Label Example</b></div>
<div class="slds-box slds-theme_default">
<lightning-input
type="email"
label={label.emailAddress}
value="">
</lightning-input>
<lightning-input
type="tel"
name="mobile"
label={label.mobile}
value="">
</lightning-input>
<div class="slds-m-top_small slds-align_absolute-center">
<lightning-button
variant="Neutral"
label="Cancel"
class="slds-m-left_x-small"
onclick={handleCancel}>
</lightning-button>
<lightning-button
variant="brand"
class="slds-m-left_x-small"
label="Next"
onclick={handleNext}>
</lightning-button>
</div>
</div>
</form>
</template>
customLabelExample.js
import { LightningElement } from 'lwc';
import emailAddress from '@salesforce/label/c.Email_Address';
import mobile from '@salesforce/label/c.Mobile';
export default class customLabelExample extends LightningElement() {
// Expose the labels to use in the template.
label = {
emailAddress,
mobile,
};
handleNext(){
}
handleCancel(){
}
}
Final Outcome
Now, if a user whose language is set up as French views the form, they will see the field’s label (Email address and Mobile) in their native language.

It is time for you to go and practice!