How to override Lightning Input Field label in Lightning Web Component?

A lightning-input-field component displays an editable field based on the field type. To create a record create layout, use this component with lightning-record-edit-form and pass in the object API name of the record you’re creating. Now, the question is how you can override Lightning Input Field label in Lightning Web Component?

<template>
    <div class="slds-p-bottom_large slds-p-left_large" style="width:500px">
        <lightning-record-edit-form id="recordViewForm" object-api-name="Contact">
            <lightning-messages></lightning-messages>
            <lightning-input-field field-name="LastName">
            </lightning-input-field>
            <lightning-button type="submit" label="Update record" class="slds-m-top_medium">
            </lightning-button>
        </lightning-record-edit-form>
    </div>
</template>

When you use lightning-input-field with lightning-record-edit-form, the field label automatically fetched from the metadata definition of the field. For Example if the label of the field defined in Salesforce is First Name, when you pass the API name of the field in lightning-input-field component, it automatically shows you the First Name as field label.

How to pass custom label value to lightning-input-field component?

When you are actually working on real time business requirement, You might need to use a custom label value for this component. Well, We can do that easily. First have a look on attributes of the lightning-input-field component:-

We are interested in attribute named variant which says the variant changes the label position of an input field. Accepted variants include standard, label-hidden, label-inline, and label-stacked. The variant, if specified, determines the label position. Otherwise, the density setting of the parent form determines the label position.

You need to change the code as below:-

<label for="fieldid">your custom label</label>
<lightning-input-field id="fieldid" field-name="LastName" variant="label-hidden">
</lightning-input-field>

What we have done here is assigned an id to the lightning-input-field component and used variant attribute with value label-hidden. When you define the label-hidden, it hides the actual label of the custom Field.

The id which we have assigned to lightning-input-field component will be used to pass a custom label value from label tag.

A working Example is:-

<template>
    <div class="slds-p-bottom_large slds-p-left_large" style="width:500px">
        <lightning-record-edit-form id="recordViewForm" object-api-name="Contact">
            <lightning-messages></lightning-messages>
            <label for="fieldid">your custom label</label>
            <lightning-input-field id="fieldid" field-name="LastName" variant="label-hidden">
            </lightning-input-field>
            <lightning-button type="submit" label="Update record" class="slds-m-top_medium">
            </lightning-button>
        </lightning-record-edit-form>
    </div>
</template>

Demo – override Lightning Input Field label in Lightning Web Component

Read more on Lightning web Component here:- https://salesforcediaries.com/category/lightning-web-component/