+ Start a Discussion
Nadia Gainsbourg 17Nadia Gainsbourg 17 

Change field label in lightning component

Hello! I'm referencing two lookup fields in my Lightning component -- Account ID and Contact ID in the Case object. These fields, unfortunately, appear that way on the front end. Could someone help figure out the syntact for changing the field labels to appear as Account and Contact Name? What I'd use on a VF page doesn't work for Lightning components, as I've found out. Thank you! Contact and Account ID Fields
Khan AnasKhan Anas (Salesforce Developers) 
Hi Nadia,

Greetings to you!

It seems like you are using lightning:inputField or lightning:outputField in your component. 

-> You can use the lightning:outputField variant of "label-hidden" along with a label tag to achieve this.
<label for="aid">Account Name</label>
 <lightning:outputField aura:id="aid" fieldName="AccountId" variant="label-hidden"/>

<label for="cid">Contact Name</label>
<lightning:outputField aura:id="cid" fieldName="ContactId" variant="label-hidden"/>

-> If you are using lightning:inputField, then variant="label-hidden" is not working as of now.  Known issue: https://success.salesforce.com/issues_view?id=a1p3A000001PYUKQA4
However, you can use CSS like this:

<label for="aid">Account Name</label>
<lightning:inputField aura:id="aid" fieldName="AccountId" variant="label-hidden"/>

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

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.

Thanks and Regards,
Khan Anas
Manish ArvindManish Arvind
Hi Nadia, can you please show the part of code on Lightning Component, on which fields are used to show.
Nadia Gainsbourg 17Nadia Gainsbourg 17
This is what I currently have and it works, except the label color is off -- darker grey than the rest. 

<label for="aid">Account</label>
<lightning:outputField aura:id="aid" fieldName="AccountId" variant="label-hidden"/>