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

enter image description here


<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}>


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}

You can do something like this:-

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

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}>

Reference:- Input Field

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.