##### Forms

###### Default Inputs

Basic Input
Input with Placeholder
Input with Phone
Input Date
Input with Payment

      <div class="row gy-3">
        <div class="col-12">
          <label class="form-label">Basic Input</label>
          <input type="text" name="#0" class="form-control">
        </div>
        <div class="col-12">
          <label class="form-label">Input with Placeholder</label>
          <input type="text" name="#0" class="form-control" placeholder="info@gmail.com">
        </div>
        <div class="col-12">
          <label class="form-label">Input with Phone </label>
          <input type="text" class="form-control flex-grow-1" placeholder="+1 (555) 253-08515">
        </div>
        <div class="col-12">
          <label class="form-label">Input Date</label>
          <input type="date" name="#0" class="form-control" placeholder="mm/dd/yyyy">
        </div>
        <div class="col-12">
          <label class="form-label">Input with Payment</label>
          <div class="input-group">
            <span class="input-group-text bg-base">
              <img src="assets/images/card/payment-icon.png" alt="image">
            </span>
            <input type="text" class="form-control flex-grow-1" placeholder="Card number">
          </div>
        </div>
      </div>

###### Input Group

Input
Input
Input
Input
http://
Input

This is a hint text to help user.

        <div class="row gy-3">
          <div class="col-12">
            <label class="form-label">Input</label>
            <div class="input-group">
              <span class="input-group-text bg-base">
                <iconify-icon icon="mynaui:envelope"></iconify-icon>
              </span>
              <input type="text" class="form-control flex-grow-1" placeholder="info@gmail.com">
            </div>
          </div>
          <div class="col-12">
            <label class="form-label">Input</label>
            <div class="input-group">
              <select class="form-select input-group-text w-90-px flex-grow-0">
                <option>US</option>
                <option>US</option>
                <option>US</option>
                <option>US</option>
                <option>US</option>
              </select>
              <input type="text" class="form-control flex-grow-1" placeholder="info@gmail.com">
            </div>
          </div>
          <div class="col-12">
            <label class="form-label">Input</label>
            <div class="input-group">
              <input type="text" class="form-control flex-grow-1" placeholder="info@gmail.com">
              <select class="form-select input-group-text w-90-px flex-grow-0">
                <option>US</option>
                <option>US</option>
                <option>US</option>
                <option>US</option>
                <option>US</option>
              </select>
            </div>
          </div>
          <div class="col-12">
            <label class="form-label">Input</label>
            <div class="input-group">
              <span class="input-group-text bg-base"> http:// </span>
              <input type="text" class="form-control" placeholder="www.random.com">
            </div>
          </div>
          <div class="col-12">
            <label class="form-label">Input</label>
            <div class="input-group">
              <input type="text" class="form-control" placeholder="www.random.com">
              <button type="button" class="input-group-text bg-base"><iconify-icon icon="lucide:copy"></iconify-icon>   Copy</button>
            </div>
            <p class="text-sm mt-1 mb-0">This is a hint text to help user.</p>
          </div>
        </div>

###### Input Sizing

Input Large
Input Medium
Input Small

      <div class="row gy-3">
        <div class="col-12">
          <label class="form-label">Input Large</label>
          <input type="text" name="#0" class="form-control form-control-lg" placeholder="info@gmail.com">
        </div>
        <div class="col-12">
          <label class="form-label">Input Medium</label>
          <input type="text" name="#0" class="form-control" placeholder="info@gmail.com">
        </div>
        <div class="col-12">
          <label class="form-label">Input Small</label>
          <input type="text" name="#0" class="form-control form-control-sm" placeholder="info@gmail.com">
        </div>
      </div>

###### Input Form With Icons

First Name
Last Name
Email
Phone
Password

      <div class="row gy-3">
        <div class="col-12">
          <label class="form-label">First Name</label>
          <div class="icon-field">
            <span class="icon">
              <iconify-icon icon="f7:person"></iconify-icon>
            </span>
            <input type="text" name="#0" class="form-control" placeholder="Enter First Name">
          </div>
        </div>
        <div class="col-12">
          <label class="form-label">Last Name</label>
          <div class="icon-field">
            <span class="icon">
              <iconify-icon icon="f7:person"></iconify-icon>
            </span>
            <input type="text" name="#0" class="form-control" placeholder="Enter Last Name">
          </div>
        </div>
        <div class="col-12">
          <label class="form-label">Email</label>
          <div class="icon-field">
            <span class="icon">
              <iconify-icon icon="mage:email"></iconify-icon>
            </span>
            <input type="email" name="#0" class="form-control" placeholder="Enter Email">
          </div>
        </div>
        <div class="col-12">
          <label class="form-label">Phone</label>
          <div class="icon-field">
            <span class="icon">
              <iconify-icon icon="solar:phone-calling-linear"></iconify-icon>
            </span>
            <input type="text" name="#0" class="form-control" placeholder="+1 (555) 000-0000">
          </div>
        </div>
        <div class="col-12">
          <label class="form-label">Password</label>
          <div class="icon-field">
            <span class="icon">
              <iconify-icon icon="solar:lock-password-outline"></iconify-icon>
            </span>
            <input type="password" name="#0" class="form-control" placeholder="*******">
          </div>
        </div>
        <div class="col-12">
          <button type="submit" class="btn btn-primary-600">Submit</button>
        </div>
      </div>

###### Horizontal Input Form

First Name
Last Name
Email
Phone
Password

      <div class="row mb-24 gy-3 align-items-center">
        <label class="form-label mb-0 col-sm-2">First Name</label>
        <div class="col-sm-10">
          <input type="text" name="#0" class="form-control" placeholder="Enter First Name">
        </div>
      </div>
      <div class="row mb-24 gy-3 align-items-center">
        <label class="form-label mb-0 col-sm-2">Last Name</label>
        <div class="col-sm-10">
          <input type="text" name="#0" class="form-control" placeholder="Enter Last Name">
        </div>
      </div>
      <div class="row mb-24 gy-3 align-items-center">
        <label class="form-label mb-0 col-sm-2">Email</label>
        <div class="col-sm-10">
          <input type="email" name="#0" class="form-control" placeholder="Enter Email">
        </div>
      </div>
      <div class="row mb-24 gy-3 align-items-center">
        <label class="form-label mb-0 col-sm-2">Phone</label>
        <div class="col-sm-10">
          <div class="form-mobile-field">
            <select class="form-select">
              <option>US</option>
              <option>US</option>
              <option>US</option>
              <option>US</option>
            </select>
            <input type="text" name="#0" class="form-control" placeholder="+1 (555) 000-0000">
          </div>
        </div>
      </div>
      <div class="row mb-24 gy-3 align-items-center">
        <label class="form-label mb-0 col-sm-2">Password</label>
        <div class="col-sm-10">
          <input type="password" name="#0" class="form-control" placeholder="*******">
        </div>
      </div>
      <button type="submit" class="btn btn-primary-600">Submit</button>

###### Example

First Name
Please provide first name
Last Name
Please provide last name
Email
Please provide email address
Phone
Please provide phone number
Password
Please provide password
Confirm Password
Please confirm password

      <form class="row gy-3 needs-validation" novalidate>
        <div class="col-md-6">
          <label class="form-label">First Name</label>
          <div class="icon-field has-validation">
            <span class="icon">
              <iconify-icon icon="f7:person"></iconify-icon>
            </span>
            <input type="text" name="#0" class="form-control" placeholder="Enter First Name" required>
            <div class="invalid-feedback">
              Please provide first name
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <label class="form-label">Last Name</label>
          <div class="icon-field has-validation">
            <span class="icon">
              <iconify-icon icon="f7:person"></iconify-icon>
            </span>
            <input type="text" name="#0" class="form-control" placeholder="Enter Last Name" required>
            <div class="invalid-feedback">
              Please provide last name
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <label class="form-label">Email</label>
          <div class="icon-field has-validation">
            <span class="icon">
              <iconify-icon icon="mage:email"></iconify-icon>
            </span>
            <input type="email" name="#0" class="form-control" placeholder="Enter Email" required>
            <div class="invalid-feedback">
              Please provide email address
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <label class="form-label">Phone</label>
          <div class="icon-field has-validation">
            <span class="icon">
              <iconify-icon icon="solar:phone-calling-linear"></iconify-icon>
            </span>
            <input type="text" name="#0" class="form-control" placeholder="+1 (555) 000-0000" required>
            <div class="invalid-feedback">
              Please provide phone number
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <label class="form-label">Password</label>
          <div class="icon-field has-validation">
            <span class="icon">
              <iconify-icon icon="solar:lock-password-outline"></iconify-icon>
            </span>
            <input type="password" name="#0" class="form-control" placeholder="*******" required>
            <div class="invalid-feedback">
              Please provide password
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <label class="form-label">Confirm Password</label>
          <div class="icon-field has-validation">
            <span class="icon">
              <iconify-icon icon="solar:lock-password-outline"></iconify-icon>
            </span>
            <input type="password" name="#0" class="form-control" placeholder="*******" required>
            <div class="invalid-feedback">
              Please confirm password
            </div>
          </div>
        </div>
        <div class="col-md-12">
          <button class="btn btn-primary-600" type="submit">Submit form</button>
        </div>
      </form>

JavaScript

      // Fetch all the forms we want to apply custom Bootstrap validation styles to
      const forms = document.querySelectorAll('.needs-validation')

      // Loop over them and prevent submission
      Array.from(forms).forEach(form => {
        form.addEventListener('submit', event => {
          if (!form.checkValidity()) {
            event.preventDefault()
            event.stopPropagation()
          }

          form.classList.add('was-validated')
        }, false)
      })