Input

Input components are used to capture user inputs. These are very useful form controls. These are commonly observed on every website like sign in/out, address forms & many more.

Simple input field

This is basic field with no validations.

                    
<div class="input-group">
    <label>Username</label>
    <input type="text">
</div>
                    
                

Input field with helper text

This is basic field with helper text in the form of suggestions to user.

                    
<div class="input-group helper">
    <label>Username </label>
    <input type="text">
    <div class="helper-message">
        Helper message
    </div>
</div>
                    
                

Input field with validation

This is basic field with error validations and asking for right input from the user.

                    
<div class="input-group err">
    <label>Password *</label>
    <input type="text">
    <div class="error-message">
        Wrong Password. Try again.
    </div>
</div>