Override Lightning Input Field Label In Lightning Web Component

SCENARIO

While working on one of the requirements for a Health sector project for a client based out of Atlanta, GA, there was a requirement to set custom labels in the place of fields standard labels in Lightning Web Component.

CHALLENGE

In Lightning Web Component, By using lightning-record-edit-form with lightning-input-field tag we can not set a custom label for lightning-input-field.

APPROACH

By hiding the label of a lightning input field and setting a custom label for a lightning input field we can set a custom label. Let's take dive into it.

The field label is automatically obtained from the metadata description of the field when lightning-input-field is used with lightning-record-edit-form. For example, if the field's label is First Name and you send the field's API name to the lightning-input-field component, the component will display First Name as the field label.

Let's look with the example, For contact object fields First Name, Last name and Email need to set custom labels as Contact First Name, Contact Last Name, Contact Email. Below is a code to override field labels.

Here we have assigned an id to the lightning-input-field component and used variant attribute with value label-hidden. while define the label-hidden, it hides the actual label of the lightning input field.

The custom label value from the label tag will be passed using the id that we have given to the lightning-input-field component.

OUTPUT

CONCLUSION

By simply hiding actual label of the lightning input field and adding a custom label tag, We can override lightning input field label.

If you have any questions you can reach out our Salesforce Consulting team here.