[SalesForce] How to find class in Lightning component

I am converting to slds to bootstrap in Lightning component. I am trying to display error message in bootstrap. It's working, but it displays very small font size. I did inspect element that time I got new class name ".form-element__help" for that error message. I just modified that font size. It displays message in bold format, but in my component that class isn't available? why?

I searched this class throughout my component. Isn't Avialbale? I just copied that class and apply the style in my css its working fine. How to find that class?

<div class="slds-form-element__control">
        <ui:inputText required="{!v.IsRequired}" aura:id="CompId" disabled="{!v.IsDisabled || v.IsReadOnly}" class="slds-input" placeholder="{!v.PlaceholderText}" change="{!c.handleOnChange}" value="{!v.Value}"/>
    </div>

Where is this class ".form-element__help"?enter image description here

Best Answer

Check out the below link in LDS website. it has the information

https://www.lightningdesignsystem.com/components/form-element/

bout Form Element

Error states alert the user when content in the form is invalid. The .slds-has-error class is placed on the <div class="slds-form-element">. Place the error message for the user in a <span> with the .slds-form-element__help class.

The native form elements, <input>, <textarea>, <select>, <input type='checkbox'>, and <input type='radio'>, receive validation styling for disabled, checked, and checked disabled, if applicable.

The read-only state is for form elements that can’t be modified. It is used for small, non-editable form fields that sit next to inputs and allows the size and height to align. It is not meant for large paragraphs of text.

Because the read-only field state has no <input>, don’t use a <label> to provide better accessibility for screen readers and keyboard navigators. Instead, use a <span> with the .slds-form-element__label class. Instead of an <input>, use the .slds-form-element__static class inside the .slds-form-element__control wrapper.

Related Topic