Components

Form Inputs

Text fields let users enter and edit text.

Basic TextField

The Input element can be used inside a form with form-card inside <form> tag. For input component add field class to the enclosing element. This is a complete form control including a label, input, and help text. It comes with following variants.

Some helper text

Code Snippets

              
               
                

                  
                  
                

                
                

                  
                  
                

                
                

                  
                  
                

                
                

                  
                  
                

                
                

                  
                  
                

                
                

                  
                  
                

                
                

                  
                  
                

                
                

                  
                  
                

                
                

                  
                  
                

                
                

                  
                  
                  Some helper text

Form with Error Validations

Form validation can be done by using validate-form class inside <form> tag. Respective error and success message is given by using form-validation-msg success-msg & form-validation-msg error-msg classes. Refer to JavaScript code for the functionality.

Valid field Please enter valid input
Valid field Please enter valid input
Valid field Please tick the checkbox

This is a random important message about claiming prize on this website.

Code Snippets

HTML snippet

              
              

                

                  
                  
                  Valid field
                  Please enter valid input
                

                

                  
                  
                  Valid field
                  Please enter valid input
                

                

                  
                  
                

                

                  
                  
                  Valid field
                  Please tick the checkbox
                

                

                  

                    
                    This is a random important message about claiming prize on this website.

JS snippet

              
              const validateForm = document.querySelectorAll(".validate-form");

              validateForm.forEach((form) => {
                form.addEventListener("submit",(e) => {
                    if (!form.checkValidity()) e.preventDefault();
                    e.preventDefault();
                    form.classList.add("form-validated");
                  },false);
              });
Previous Next