Display HelpText Icon With ‘lightning:input’ Field In 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.
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 :
Related Resources :
lightning:helpText
lightning:input
Other popular Post :
- Alternate/Workaround for contains() function in aura:if Condition in Lightning Component
- How to Change lightning:Icon Color In Salesforce Lightning Component
- How to Display Colorful Values Based on Picklist Value in Lightning Component Data Table
- Customize Salesforce logIn Screen In Just Few Minutes.
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.
fieldLevelHelp attribute only available for ‘lightning:inputName’ field not for ‘lightning:input’ type fields.
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.