I have a Lightning Web Component and in that I'm using a lighting-record-edit-form. I'm trying to use a custom label for an input by hiding the default one for the lightning-input-field and adding my own. I'm using the variant='label-hidden' and it isn't working.

It works on other fields, just not when the field rendered is a lookup field or a Rich Text field.

I've tried some different things with CSS but it doesn't seem to be picking it up.

I've seen some other similar questions with work arounds but they appear to only be for Aura components.

Anybody else encountered this or come up with a workaround?

<lighting-input-field field-name='Lookup_Field__c' variant='label-hidden'></lightning-input-field>
  • 1
    there are no css workarounds for lightning web components due to the nature of shadow dom
    – glls
    Apr 17, 2019 at 21:04
  • I was afraid of that.
    – aaron
    Apr 17, 2019 at 21:40
  • Is there any solutions for it?
    – Jair
    Apr 26, 2019 at 3:21
  • I haven't found a solution yet. I think we just have to wait for Salesforce to fix it.
    – aaron
    Apr 30, 2019 at 19:07

2 Answers 2


I see its working now by using variant="label-hidden"

<lightning-input-field field-name="AccountId" variant="label-hidden"></lightning-input-field>

enter image description here


try this

<div class="slds-form-element">
         <label class="slds-form-element__label" >{labelSubject}</label>
         <lightning-input-field variant='label-hidden' field-name={nameField}  required></lightning-input-field>

Take a look at the variants of this component to change the label's position

  • Was searching how to do for a while. Thanks @Emmanuel Feb 3, 2021 at 4:22

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.