Input

The input component is used to create interactive controls for web-based forms in order to accept data from the user.

Label Input

Simple Input contain a label and a input field, where a user can interact with the provided input field.

                               
                                  <div class="input-container">
                                     <label for="email">Email <small>*</small></label>
                                     <input class="input" type="text" id="email" placeholder="enter your email">
                                     <label for="password">Password <small>*</small></label>
                                     <input class="input" type="password" id="password" placeholder="enter your password">
                                  </div>
                               
                           

Inputs with error styling

Inputs with error styling contain a error related message below the Input field .

                                
                                    <div class="input-container">
                                       <label for="email">Email <small>*</small></label>
                                       <input class="input error-input" type="text" id="email" placeholder="enter your email">
                                       <div class="error-msg">
                                           <small>please enter a valid email</small>
                                       </div>
                                       <label for="password">Password <small>*</small></label>
                                       <input class="input error-input" type="password" id="password" placeholder="enter your password">
                                       <div class="error-msg">
                                           <small>Wrong Password. Try Again.</small>
                                       </div>
                                    </div>
                                
                            

Text Box

Below is the example of a simple textbox.

                                
                <textarea name="textbox" class="text-box" cols="30" rows="10" placeholder="I am a Text-box"></textarea>