8

In my lightning:recordEditForm I use lightning:inputField which is mostly perfectly works. But I would like to customize displayed field label and make it different from object field label.

Maybe it's possible to replace lightning:inputField with any other lightning element having binding inplace?

1
  • 4
    You would need to write your own component using a variety of lightning:input, lightning:select, etc.
    – sfdcfox
    Feb 9, 2018 at 18:10

2 Answers 2

11

You can use the lightning:inputfield variant of "label-hidden" along with a label tag to achieve this.

<label for="AddressState">State</label>
<lightning:inputfield aura:id="AddressState" fieldName="State" variant="label-hidden"/> 

The default label will be hidden and the manual label shows in its place.

6
  • I cannot get this to work with <lightning:inputfield
    – Robs
    Jun 23, 2018 at 17:27
  • variant of "label-hidden" is for <lightning:outputfield
    – Robs
    Jun 23, 2018 at 17:45
  • 1
    it works for lightning:inputField, but for some reason, it doesn't work if the field renders as a lookup
    – willard
    Dec 14, 2018 at 17:54
  • With LWC, the variant of "label-hidden" doesn't work with textArea types either. Mar 8, 2019 at 22:57
  • The property variant is not documented for lightning:inputField, so it might stop working at some point.
    – Eduard
    Jun 5, 2019 at 10:25
8

You would need to use this CSS to hide the default label

.THIS label.slds-form-element__label {
    display: none;
}

And then add your own custom labels:

<label for="AddressState">State</label>
<lightning:inputfield aura:id="AddressState" fieldName="State" variant="label-hidden"/> 
1
  • This would mean you'd have to do labels for every lightning:inputField in your component. I think you can add a class to your specific inputField and then do CSS based on that.
    – willard
    Aug 20, 2018 at 14:10

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .