6

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>
Improve this question
4
  • 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

Reset to default
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

Improve this answer
1
  • variant='label-hidden' is not working if Field Type is Rich text
    – Manish Kumar
    Nov 14, 2022 at 5:00
1

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>
</div>

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

Improve this answer
1
  • Was searching how to do for a while. Thanks @Emmanuel
    – Rohan Shenoy
    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 .