Input

Inputs are the primary source to take user information, below is the styled inputs available.

Simple Inputs

For simple style inputs use class inp-label on label and inp class on input.

<div class="inp-container">
  <label class="inp-label d-block inp-label-required" for=""
    >Email address</label
  >
  <input class="inp" placeholder="Enter email address" />
</div>

<div class="inp-container">
  <label class="inp-label d-block inp-label-required" for=""
    >Textarea input</label
  >
  <textarea
    class="inp"
    placeholder="Enter text here"
    name=""
    id=""
    cols="30"
    rows="10"
  ></textarea>
</div>            
            

Validation input

The validation input have error message if user enters invalid value. To use check the below html code.

<form onsubmit="event.preventDefault(); checkFormValidation()">
  <div class="inp-container">
    <label class="inp-label d-block inp-label-required" for="">Username</label>
    <input class="inp" id="inp-email" placeholder="Enter email address" />

    <div class="err-msg-container d-none">
      <span
        ><i class="fa fa-exclamation-circle err-icon"></i>Enter your
        username!</span
      >
    </div>
  </div>

  <div class="inp-container">
    <label class="inp-label d-block inp-label-required" for="">Password</label>
    <input class="inp" id="inp-password" placeholder="Enter text here" />

    <div class="err-msg-container d-none">
      <span
        ><i class="fa fa-exclamation-circle err-icon"></i>Enter your
        password!</span
      >
    </div>
  </div>

  <div class="inp-container">
    <input type="checkbox" id="checkbox-termsPolicy" />
    <label class="inp-label inp-label-required"
      >Yes, I accept the Cosmic UI terms & policy</label
    >

    <div class="err-msg-container d-none">
      <span
        ><i class="fa fa-exclamation-circle err-icon"></i>Accept our terms &
        policy before going forward!</span
      >
    </div>
  </div>

  <div class="inp-container">
    <button class="btn" type="submit">Submit</button>
  </div>
</form>
            

Javascript

const emailInput = document.getElementById("inp-email");
const passwordInput = document.getElementById("inp-password");
const termsPolicyInput = document.getElementById("checkbox-termsPolicy");
const errMessage = document.getElementsByClassName("err-msg-container")

function checkFormValidation(){

    if(emailInput.value == ""){
        errMessage[0].style.display = "block";
    }else{
        errMessage[0].style.display = "none";
    }

    if(passwordInput.value == ""){
        errMessage[1].style.display = "block";
    }else{
        errMessage[1].style.display = "none";
    }

    if(!termsPolicyInput.checked){
        errMessage[2].style.display = "block";
    }else{
        errMessage[2].style.display = "none";
    }
}