6

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?

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

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.

| improve this answer | |
  • I cannot get this to work with <lightning:inputfield – Robs Jun 23 '18 at 17:27
  • variant of "label-hidden" is for <lightning:outputfield – Robs Jun 23 '18 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 '18 at 17:54
  • With LWC, the variant of "label-hidden" doesn't work with textArea types either. – Kai Tribble Mar 8 '19 at 22:57
  • The property variant is not documented for lightning:inputField, so it might stop working at some point. – Eduard Jun 5 '19 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"/> 
| improve this answer | |
  • 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 '18 at 14:10

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.