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
    Commented Apr 17, 2019 at 21:04
  • I was afraid of that.
    – aaron
    Commented Apr 17, 2019 at 21:40
  • Is there any solutions for it?
    – Jair
    Commented 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
    Commented 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

  • variant='label-hidden' is not working if Field Type is Rich text Commented Nov 14, 2022 at 5:00

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 Commented Feb 3, 2021 at 4:22

You must log in to answer this question.

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