Important Links

Get Started

Components

Avatar Alert Badge Button Cards Image Input Texts Utilites List Navigation Rating Snackbar Grid Modal

Home Components Cards

Input

The Input component is a component that is used to get user input in a text field.

Usages

Enter Your Name

This is basic Input Component from our component library.

                
                  < -- For Default Input Component -->
                  

                  <div class="input-box"> 

                  <label>Enter Name </label> 

                  <input placeholder="Please Enter Text" type="text" class="input" />

                  </div>

Error Input

This input component is used to validate the user input.

Usages

Enter Your Name

Invalid Name !

To achieve the above Images design, you need to follow the following code:

                
                  < -- For Error Input Component -->
                  

                  <div class="input-box err"> 

                  <label>Enter Name </label> 

                  <input placeholder="Please Enter Text" type="text" class="input" />

                  </div>
                  <div class="err">Invalid Name!</div>

Cards

Input