Basic Input

<div class="form__input flex--row">
  <input type="input" class="input__txt" placeholder="Name" name="name" id="name" required />
</div>

Basic Input with Icon

<div class="form__input flex--row">
  <input type="input" class="input__txt" placeholder="Name" name="name" id="name" required />
  <span class="material-icons md-16 input__icon">search</span>
</div>

Focused Inputs

<div class="form__input flex--row input--focused">
  <input type="input" class="input__txt input--focused" placeholder="Name" name="name" id="name" required />
</div>
<div class="form__input flex--row input--focused">
  <input type="input" class="input__txt input--focused" placeholder="Name" name="name" id="name" required />
  <span class="material-icons md-16 input__icon">search</span>
</div>

Input Validator : Successful

Valid! Log-in Successful

<div class="form__input flex--row">
  <input type="input" class="input__txt input--valid" placeholder="Aloo baloo" name="name" id="name" required />
</div>
<p class="form__label label--valid">Valid! Log-in Successful</p>

Input Validator : Unsuccesful

InValid! Try again later

<div class="form__input flex--row ">
  <input type="input" class="input__txt input--invalid" placeholder="Aloo baloo" name="name" id="name" required />
</div>
<p class="form__label label--invalid">InValid! Try again later</p>