help text icon with inputfield

Display HelpText Icon With ‘lightning:input’ Field In Lightning Component

Lightning Component

In lightning component development there is no standard way to display lightning help text icon along with lightning input fields label. so in this post we are going to use a workaround to fix this issue.

Lighting Help Text icon with lighting input field
Output Result
Lightning Component : [inputWithHelpText.cmp]
<aura:component>
    <!--add custom label for input field-->
    <label class="slds-form-element__label" style="margin-right: 0.5rem;">Last Name</label>
    <!--lightning help text for input field-->
    <lightning:helptext content="Please enter your last name" class="customIcon"/> 
    <!-- use variant="label-hidden" for hide standard label-->
    <lightning:input type="text"
                     name="lName"
                     label="Last Name"
                     variant="label-hidden"/>
</aura:component>
inputWithHelpText.css
/*adjusting help text position*/
.THIS .customIcon div{
    vertical-align: top !important;
}
 
.THIS.customIcon div{
    vertical-align: top !important;
}
Lightning Application : [Test.app]
<aura:application extends="force:slds">
    <c:inputWithHelpText/>
<!-- here c: is org. default namespace prefix-->
</aura:application>
Output :

input field with HelpText lightning

 

Related Resources :
lightning:helpText
lightning:input

Other popular Post :

Happy Learning 🙂

like our facebook page for new post updates. & Don’t forget to bookmark this site for your future reference.

4 comments

  • Hi piyush,
    I have a question regarding this topic. I can make use of ‘fieldLevelHelp’ attribute in instead of going for this customization.
    I am very new to this lightning based on my curiosity I am posting my query. Kindly help.

  • Hi Piyush,
    I am very new to lightning concepts. Kindly help me. Instead of going for all this customization for getting helptext next to label I can use ‘filedLevelHelp’ attribute in tag?

  • fieldLevelHelp attribute works for lightning:input too, even though it’s not documented at this time. It is documented for lightning-input (LWC) and the Aura components use LWC under the covers.

Leave a Reply