---
title: "Custom Labels in LWC"
url: "https://blog.beyondthecloud.dev/tips/custom-labels-in-lwc"
category: "LWC"
tags: "javascript"
published: "2024-02-03"
---

# Custom Labels in LWC

To use labels in HTML, you need to create an additional component variable (labels).

### How to keep Custom Labels in LWC?

There are several different ways to store Custom Labels in LWC.

If you need to use a few labels we recommend the following approach:

Create a separated file called customLabels.js.

![Custom Labels in LWC — screenshot 1](https://blog.beyondthecloud.dev/tips/custom-labels-in-lwc/fig-1.webp)

What are the next steps?

Import labels in the customLabels.js file.

We are using ES6 module here, which allows us to share code.

```javascript
import errorOccured from '@salesforce/label/c.ErrorOccured';
import firstName from '@salesforce/label/c.FirstName';
import lastName from '@salesforce/label/c.LastName';
import email from '@salesforce/label/c.Email';

const labels = {
    errorOccured,
    firstName,
    lastName,
    email
};

export default labels;
```

Import labels from customLabels.js into your LWC.

To use labels in HTML, you need to create an additional component variable (labels).

```javascript
import { LightningElement } from 'lwc'
import labels from './customLabels'

export default class MyComponent extends LightningElement {
    labels = labels;

    // ...
}
```

```markup
<template>
    <div>{labels.errorOccured}</div>
</template>
```

Why a separate JS file for labels?

Single Responsibility Principle - The sole responsibility of customLabel.js is to manage labels. Code Readability - The LWC component (myComponent.js) does not contain label imports, keeping the component's JS code clean. Lack of Dependencies - Each component has its own labels that can be changed independently.