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

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

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.