logo Apollo-UI

Input

A class to style any type of input element and handle the error messages.


Add 'input' class to style primary input fields. In case mandatory fields or fields with required attributes add 'input--man' for error handling. Add dimensions to input-container to limit the width of fields.

Copied!
<label for="search-bar">
<span class="label">Search Bar</span>
<div class="search--ctr">
    <i class="fas fa-search search--btn"></i>
    <input type="text" placeholder="Search"
        class="input no--bdr" id="user-name" 
        name="user-name"/>
    </div>
</label><label for="user-name">
<span class="label">Username</span>
<input type="text" placeholder="Enter Username" class="input"
    id="user-name" name="user-name" /> </label>
              
<label for="pswd">
<span class="label">Password*</span>
<input type="password" placeholder="Enter Password" class="input input--man"
          id="pswd" name="password" required />
<span class="input--error">This field is mandatory</span> </label>