I'm using lightning:input-field in LWC, but I want only the input field, nothing else. I have hide the label using variant="label-hidden", but I automatically get the help-text near the field. And I don't want it in my component.

enter image description here

My code is :

<lightning-input-field field-name="AccountId" variant="label-hidden"></lightning-input-field>
  • Have you inspected the markup to verify that the help text is part of the lightning-input-field and not part of another element? – Brett Nelson Aug 22 '19 at 13:28
  • Yup I checked and help text is part of lightning-input-field only – arpit gupta Aug 22 '19 at 14:10

Remove the help text from the field definition.

enter image description here

  • But that do not solve my purpose as ultimately I need a custom label for that standard field and I am using below code :- <label class="slds-form-element__label" style="margin-right: 0.5rem;">Account Name</label> <lightning-helptext class="customIcon" content={fieldsInfo.AccountId.inlineHelpText}></lightning-helptext> <lightning-input-field field-name="AccountId" variant="label-hidden"></lightning-input-field> and helptext will display nothing for lightning-helptext – arpit gupta Aug 22 '19 at 14:12
  • Try using <lightning-input type="text" name="textInput" label="Enter a Text" ></lightning-input> – Tamil Aug 22 '19 at 18:03
  • Here I have a lookup field and as per the documentation lightning-input dont have any type=lookup. – arpit gupta Aug 23 '19 at 9:55

You can make a style sheet as a static resource (needed for scoping issues; regular CSS sheet won't work), import it in your component, and attach a class to the div or whatever is wrapping your lightning-input-field. The class in the stylesheet needs to drill down in the component structure and manually hide the tooltip. I've have to do this for a few components. Since lightning web components aren't open source, you'll need to look the structure with inspector. Of course, realize that if salesforce changes the structure of the component in the future, your CSS override could stop working.


I found 2 solutions to this.

LWC is enforcing the shadow DOM style scoping, so you can't currently style other Elements outside your shadow tree.

Workaround 1 :- As a workaround we can use the aura component to override the styling of LWC inner elements ( Aura components do not enforce strict CSS encapsulation so the CSS will come in action here). Inspect the particular help icon area on page and find some unique class of help icon. And add below styling to your aura component CSS file (Note: This will NOT work in LWC CSS file as LWC enforce strict CSS encapsulation.) and then implement your LWC in that Aura component.

   .THIS .slds-form-element__icon {/* Replace this class name "slds-form-element__icon" by your finding. */
    display: none !important;

Implement LWC (named as testDOM) in Aura :-

<aura:component implements="lightning:actionOverride">

Workaround 2 :- We have one more workaround to this where we don't use Aura Component but put the CSS that we wanted to apply to the inner shadow DOM of Salesforce Base Components in a static resource. Then we used the loadStyle method of lightning/platformResourceLoader module to load that css. The styles loaded this way do apply to the inner elements within Salesforce base components.

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.