How to overwrite Field name in LWC

Question

How to overwrite the Field name in LWC.

For Example : in the below screen show i have field called Family Name in UI, I have to overwrite the field to NAME

I tried to add this code in JS { fieldAPI: 'Family_Name__c', required:true, **fieldName:'Name'** }, not worked. Please help me on this

Html:

<template for:each={familyName} for:item="field" for:index="index">
                            <div class={sectionLayout} key={field.fieldAPI}>
                                <lightning-input-field field-name={field.fieldAPI} required={field.required}>
                                </lightning-input-field>
                            </div>
                        </template>

js:

import { LightningElement, track } from "lwc";

export default class Enrollment extends LightningElement {
  @track enrollmentId;

 @track familyName = [
  { fieldAPI: 'Family_Name__c', required:true, fieldName:'Name' },
  { fieldAPI:'Home_Phone__c', required:true}
];
}

Answer 1

You can do something like this:-

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

You can hide the label using variant property and use your own custom label.

The variant changes the label position of an input field. Accepted variants include standard, label-hidden, label-inline, and label-stacked. If variant is specified, the label position is determined by the variant. Otherwise, it is determined by the density setting of the parent form.

In your case to make it dynamic, You can do like this:-

<template for:each={familyName} for:item="field" for:index="index">
     <div class={sectionLayout} key={field.fieldAPI}>
          <label for={field.fieldAPI}>{field.fieldName}</label>
          <lightning-input-field id={field.fieldAPI} field-name={field.fieldAPI} required={field.required}>
          </lightning-input-field>
     </div>
</template>

Reference:- Input Field