UI Library

Textbox (UI States)

Toggle example guides Toggle HTML markup

Input textbox user-interaction states.

<insert-markup>textbox.uistates-</insert-markup>
Help text to fill in this value. Error message.
:focus
an element that received focus.
<insert-markup>textbox.uistates-0</insert-markup>
Help text to fill in this value. Error message.
Markup 
<div class="m-ip-textbox">
    <label class="m-ip-textbox__label" for="first-name">First Name</label>
    <span class="m-ip-textbox__help-text">Help text to fill in this value.</span>
    <span class="m-ip-textbox__error">Error message.</span>
    <input type="text" id="first-name" class="m-ip-textbox__input [modifier class]" name="first_name" value="Magesh">
</div>
Source: static/css/src/_m-ip-textbox.scss, line 1