Basic Input

      <input type="text" placeholder="Search..." class="input standard" />
    

Input with a focus

      <input type="text" placeholder="Search..." class="input focus" />
    

Valid Input

      <div class="input-group">
        <label class="success-label">Your name</label>
        <input type="text" placeholder="John Doe" class="input success" />
        <p class="success-message"><strong>Alright!</strong> Username available!</p>
      </div>
    

Invalid Input

      <div class="input-group">
        <label class="error-label">Your name</label>
        <input type="text" placeholder="John Doe" class="input error" />
        <p class="error-message"><strong>Oops!</strong> Username already taken!</p>
      </div>
    

Large Size Input

      <input type="text" placeholder="Search..." class="input standard large" />
    

Small Size Input

      <input type="text" placeholder="Search..." class="input standard small" />
    

Disabled Input

      <input type="text" disabled="true" placeholder="Search..." class="input standard disabled" />
    

Input with a helper text

      <input type="text" placeholder="name@example.com" class="input standard" />
    

Input with a search icon

      <div class="std-search">
        <input type="text" placeholder="Search..." class="input standard" />
        <button class="btn btn-brand btn-primary search-btn">
          <span class="material-icons">
            search
          </span>
        </button>
      </div>
    

Input with a search button

      <div class="std-search">
        <input type="text" placeholder="Search..." class="input standard" />
        <button class="btn btn-brand btn-primary search-btn">Search</button>
      </div>