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>
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.