UI Library

Textbox (Validation states)

Toggle example guides Toggle HTML markup

Input textbox loading and error states.

<insert-markup>textbox.validationstates-</insert-markup>

How to correct this input.

.is-loading
Validation or background-activity in progress
<insert-markup>textbox.validationstates-0</insert-markup>

How to correct this input.

.has-error
Input data is NOT valid
<insert-markup>textbox.validationstates-1</insert-markup>

How to correct this input.

Markup 
<div class="m-ip-textbox [modifier class]">
    <label class="m-ip-textbox__label" for="error">Full name</label>
    <p class="m-ip-textbox__error">How to correct this input.</p>
    <input class="m-ip-textbox__input" type="text" id="error" name="full_name" value="Magesh Ravi">
</div>
Source: static/css/src/_m-ip-textbox.scss, line 126