# Advance form

A simple, beautiful form input, editor and uploader.

## Password (Required javascript)

Input password with show button

Password
visibility visibility_off
Password
visibility visibility_off

    <!-- input password filled -->
    <div class="relative z-0 [&.show_.off]:!block [&.show_.on]:!hidden">
      <input type="password" aria-label="inputpassword" name="inputpassword" id="inputpassword" class="w-full h-12 block leading-5 relative pt-3 px-4 rounded-t text-gray-800 bg-gray-100 dark:bg-gray-700 border-b focus:border-b-2 border-gray-500 dark:border-gray-400 overflow-x-auto focus:outline-none focus:border-primary-600 focus:ring-0 dark:text-gray-200 dark:focus:border-primary-200 peer" placeholder=" " value="">
      <label for="inputpassword" class="absolute text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-2.5 scale-75 top-2.5 z-10 origin-[0] left-4 peer-focus:left-4 peer-focus:text-primary-600 dark:peer-focus:text-primary-200 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-2.5 peer-invalid:text-error-600 dark:peer-invalid:text-error-200">Password</label>

      <div title="Show or hide password" onclick="passwordFunc()" class="absolute inset-y-0 right-0 pr-3 flex items-center text-sm leading-5 cursor-pointer">
        <span class="material-symbols-outlined on">visibility</span>
        <span class="material-symbols-outlined off !hidden">visibility_off</span>
      </div>
    </div>

    <!-- input password outlined -->
    <div class="relative z-0 [&.show_.off]:!block [&.show_.on]:!hidden">
      <input type="password" aria-label="inputpass" name="inputpass" id="inputpass" class="w-full h-12 block leading-5 relative py-2 px-4 rounded bg-neutral-10 dark:bg-neutral-900 border focus:border-2 border-gray-500 overflow-x-auto focus:outline-none focus:border-primary-600 focus:ring-0 dark:text-gray-200 dark:border-gray-400 dark:focus:border-primary-200 peer" placeholder=" " value="">

      <label for="inputpass" class="absolute tracking-[.03125em] text-gray-500 dark:text-gray-400 bg-neutral-10 dark:bg-neutral-900 duration-300 transform px-1 -translate-y-6 scale-75 top-2.5 z-10 origin-[0] left-4 peer-focus:left-4 peer-focus:text-primary-600 dark:peer-focus:text-primary-200 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 peer-focus:bg-neutral-10 dark:peer-focus:bg-neutral-900 peer-focus:px-1 peer-invalid:text-error-600 dark:peer-invalid:text-error-200">Password</label>

      <div title="Show or hide password" onclick="passwordFunc2()" class="absolute inset-y-0 right-0 pr-3 flex items-center text-sm leading-5 cursor-pointer">
        <span class="material-symbols-outlined on">visibility</span>
        <span class="material-symbols-outlined off !hidden">visibility_off</span>
      </div>
    </div>

    <script>
    function passwordFunc() {
      const x = document.getElementById("inputpassword");
      const parent = x.parentNode;

      if (x.type === "password") {
        x.type = "text";
        parent.classList.add("show");
      } else {
        x.type = "password";
        parent.classList.remove("show");
      }
    }
    </script>

## Input OTP (Required javascript)

Input OTP verification

    <!-- Input OTP -->
    <div id="otp" class="flex space-x-6 mt-2">
      <input type="text" maxlength="1" class="w-12 leading-5 h-12 relative py-2 px-4 rounded bg-neutral-10 dark:bg-neutral-900 border focus:border-2 border-gray-500 overflow-x-auto focus:outline-none focus:border-primary-600 focus:ring-0 dark:text-gray-200 dark:border-gray-400 dark:focus:border-primary-200 peer" id="exampleInputotp1" required>
      <input type="text" maxlength="1" class="w-12 leading-5 h-12 relative py-2 px-4 rounded bg-neutral-10 dark:bg-neutral-900 border focus:border-2 border-gray-500 overflow-x-auto focus:outline-none focus:border-primary-600 focus:ring-0 dark:text-gray-200 dark:border-gray-400 dark:focus:border-primary-200 peer" id="exampleInputotp2" required>
      <input type="text" maxlength="1" class="w-12 leading-5 h-12 relative py-2 px-4 rounded bg-neutral-10 dark:bg-neutral-900 border focus:border-2 border-gray-500 overflow-x-auto focus:outline-none focus:border-primary-600 focus:ring-0 dark:text-gray-200 dark:border-gray-400 dark:focus:border-primary-200 peer" id="exampleInputotp3" required>
      <input type="text" maxlength="1" class="w-12 leading-5 h-12 relative py-2 px-4 rounded bg-neutral-10 dark:bg-neutral-900 border focus:border-2 border-gray-500 overflow-x-auto focus:outline-none focus:border-primary-600 focus:ring-0 dark:text-gray-200 dark:border-gray-400 dark:focus:border-primary-200 peer" id="exampleInputotp4" required>
    </div>

    <!-- OTP javascript -->
    <script>
    function OTPInput() {
    const inputs = document.querySelectorAll('#otp > *[id]');
    for (let i = 0; i < inputs.length; i++) {
      inputs[i].addEventListener('keydown', function(event) {
        if (event.key === "Backspace") {
          inputs[i].value = '';
          if (i !== 0)
            inputs[i - 1].focus();
        } else {
          if (i === inputs.length - 1 && inputs[i].value !== '') {
            return true;
          } else if (event.keyCode > 47 && event.keyCode < 58) {
            inputs[i].value = event.key;
            if (i !== inputs.length - 1)
              inputs[i + 1].focus();
            event.preventDefault();
          } else if (event.keyCode > 64 && event.keyCode < 91) {
            inputs[i].value = String.fromCharCode(event.keyCode);
            if (i !== inputs.length - 1)
              inputs[i + 1].focus();
            event.preventDefault();
          }
        }
      });
    }
    }
    OTPInput();
    </script>

## Text Editor (Required plugins)

Example textarea with editor

                        <!-- text editor -->
                        <textarea class="texteditor w-full leading-5 relative pt-6 px-4 rounded-t text-gray-800 bg-gray-100 dark:bg-gray-700 border-b focus:border-b-2 border-gray-500 dark:border-gray-400 overflow-x-auto focus:outline-none focus:border-primary-600 focus:ring-0 dark:text-gray-200 dark:focus:border-primary-200" id="texteditor" rows="3"></textarea>

## Upload Images (Required plugins)

Example image uploader with dropzone

Drag & drop images here
+

                      <!-- Uploader -->
                      <div id="imageUpload" class="dropzone multiple-dropzone !border !border-gray-200 dark:!border-gray-700 !rounded-lg mb-6">
                        <div class="dz-message" data-dz-message>
                          <div class="pre-upload flex flex-col justify-center">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="mx-auto text-gray-500 inline-block w-10 h-10 bi bi-cloud-arrow-up" viewBox="0 0 16 16">
                              <path fill-rule="evenodd" d="M7.646 5.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 6.707V10.5a.5.5 0 0 1-1 0V6.707L6.354 7.854a.5.5 0 1 1-.708-.708l2-2z"></path>
                              <path d="M4.406 3.342A5.53 5.53 0 0 1 8 2c2.69 0 4.923 2 5.166 4.579C14.758 6.804 16 8.137 16 9.773 16 11.569 14.502 13 12.687 13H3.781C1.708 13 0 11.366 0 9.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383zm.653.757c-.757.653-1.153 1.44-1.153 2.056v.448l-.445.049C2.064 6.805 1 7.952 1 9.318 1 10.785 2.23 12 3.781 12h8.906C13.98 12 15 10.988 15 9.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 4.825 10.328 3 8 3a4.53 4.53 0 0 0-2.941 1.1z"></path>
                            </svg>
                            <div class="py-3"><span>Drag & drop images here</span></div>
                          </div>
                          <div class="pre-upload text-center">
                            <button class="py-1.5 px-3 inline-block text-center rounded leading-normal text-gray-800 bg-gray-100 border border-gray-100 hover:text-gray-900 hover:bg-gray-200 hover:ring-0 hover:border-gray-200 focus:bg-gray-200 focus:border-gray-200 focus:outline-none focus:ring-0 mr-2 dark:bg-gray-300">Browse file</button>
                          </div>
                          <span class="after-upload">+</span>
                        </div>
                      </div>

### Search

## Theme Settings

### Light & Dark

### Theme Colors

### Layouts