Field

<label class="flex flex-col gap-4px">
  <span class="flex gap-4px text-p3 font-medium items-center">
    Label
  </span>
  <div class="flex flex-col relative">
    <input
      type="text"
      name="name-1"
      placeholder="Text"
      class="flex gap-8px items-center text-p2 peer text-black py-8px rounded-8px border placeholder:text-black-500 outline-none transition-all dark:text-white dark:placeholder:text-black-400 px-16px bg-white border-black-200 hover:border-black-600 focus:border-black-600 active:border-black-600 user-invalid:border-red-600 user-invalid:hover:border-red-600 user-invalid:focus:border-red-600 user-invalid:active:border-red-600 user-invalid:bg-red-50 dark:bg-black dark:border-black-600 dark:hover:border-black-400 dark:focus:border-black-400 dark:active:border-black-400 dark:user-invalid:bg-red-900 dark:user-invalid:bg-black shadow-[0_1px_2px_0px_#0000000D] focus:shadow-[0_0_0_2px_#0F172A33] dark:shadow-[0_1px_2px_0px_rgba(255,255,255,0.06)] dark:focus:shadow-[0_0_0_2px_rgba(255,255,255,0.33)] disabled:bg-black-50 disabled:border-black-100 dark:disabled:bg-black-800 dark:disabled:border-black-700 disabled:shadow-none"
      pattern="[a-zA-Z0-9_]+"
      value=""
      autocomplete="off"
      input_classes="">
    </input>
    <p class="text-p3 text-red-600 mt-4px hidden peer-user-invalid:flex">
      Incorrect value
    </p>
  </div>
</label>

<label class="flex flex-col gap-4px">
  <span class="flex gap-4px text-p3 font-medium items-center">
    Label
    <span class="text-black-500 text-p3">
      (optional)
    </span>
  </span>
  <div class="flex flex-col relative">
    <input
      type="text"
      name="name-optional"
      placeholder="Text"
      class="flex gap-8px items-center text-p2 peer text-black py-8px rounded-8px border placeholder:text-black-500 outline-none transition-all dark:text-white dark:placeholder:text-black-400 px-16px bg-white border-black-200 hover:border-black-600 focus:border-black-600 active:border-black-600 user-invalid:border-red-600 user-invalid:hover:border-red-600 user-invalid:focus:border-red-600 user-invalid:active:border-red-600 user-invalid:bg-red-50 dark:bg-black dark:border-black-600 dark:hover:border-black-400 dark:focus:border-black-400 dark:active:border-black-400 dark:user-invalid:bg-red-900 dark:user-invalid:bg-black shadow-[0_1px_2px_0px_#0000000D] focus:shadow-[0_0_0_2px_#0F172A33] dark:shadow-[0_1px_2px_0px_rgba(255,255,255,0.06)] dark:focus:shadow-[0_0_0_2px_rgba(255,255,255,0.33)] disabled:bg-black-50 disabled:border-black-100 dark:disabled:bg-black-800 dark:disabled:border-black-700 disabled:shadow-none"
      pattern="[a-zA-Z0-9_]+"
      value=""
      autocomplete="off"
      input_classes="">
    </input>
    <p class="text-p3 text-red-600 mt-4px hidden peer-user-invalid:flex">
      Incorrect value
    </p>
  </div>
</label>

<label
  class="flex flex-col gap-4px"
  data-controller="password">
  <span class="flex gap-4px text-p3 font-medium items-center">
    Label
  </span>
  <div class="flex flex-col relative">
    <input
      type="password"
      name="password-1"
      placeholder="••••••••••"
      class="flex gap-8px items-center text-p2 peer text-black py-8px rounded-8px border placeholder:text-black-500 outline-none transition-all dark:text-white dark:placeholder:text-black-400 px-16px bg-white border-black-200 hover:border-black-600 focus:border-black-600 active:border-black-600 user-invalid:border-red-600 user-invalid:hover:border-red-600 user-invalid:focus:border-red-600 user-invalid:active:border-red-600 user-invalid:bg-red-50 dark:bg-black dark:border-black-600 dark:hover:border-black-400 dark:focus:border-black-400 dark:active:border-black-400 dark:user-invalid:bg-red-900 dark:user-invalid:bg-black shadow-[0_1px_2px_0px_#0000000D] focus:shadow-[0_0_0_2px_#0F172A33] dark:shadow-[0_1px_2px_0px_rgba(255,255,255,0.06)] dark:focus:shadow-[0_0_0_2px_rgba(255,255,255,0.33)] disabled:bg-black-50 disabled:border-black-100 dark:disabled:bg-black-800 dark:disabled:border-black-700 disabled:shadow-none"
      pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*_+-=;:<>.\/?]).{8,}$"
      value=""
      autocomplete="off"
      data-password-target="input"
      data-action="input->password#check_pattern"
      input_classes=" js_password-input">
    </input>
    <p class="text-p3 text-red-600 mt-4px hidden peer-user-invalid:flex">
      Incorrect value
    </p>
  </div>
</label>

<label class="flex flex-col gap-4px">
  <span class="flex gap-4px text-p3 font-medium items-center">
    Label
  </span>
  <div class="flex flex-col relative">
    <input
      type="text"
      name="name-with-caption"
      placeholder="Text"
      class="flex gap-8px items-center text-p2 peer text-black py-8px rounded-8px border placeholder:text-black-500 outline-none transition-all dark:text-white dark:placeholder:text-black-400 px-16px bg-white border-black-200 hover:border-black-600 focus:border-black-600 active:border-black-600 user-invalid:border-red-600 user-invalid:hover:border-red-600 user-invalid:focus:border-red-600 user-invalid:active:border-red-600 user-invalid:bg-red-50 dark:bg-black dark:border-black-600 dark:hover:border-black-400 dark:focus:border-black-400 dark:active:border-black-400 dark:user-invalid:bg-red-900 dark:user-invalid:bg-black shadow-[0_1px_2px_0px_#0000000D] focus:shadow-[0_0_0_2px_#0F172A33] dark:shadow-[0_1px_2px_0px_rgba(255,255,255,0.06)] dark:focus:shadow-[0_0_0_2px_rgba(255,255,255,0.33)] disabled:bg-black-50 disabled:border-black-100 dark:disabled:bg-black-800 dark:disabled:border-black-700 disabled:shadow-none"
      pattern="[a-zA-Z0-9_]+"
      value=""
      autocomplete="off"
      input_classes="">
    </input>
    <p class="hidden peer-placeholder-shown:flex text-p3 text-black-600 dark:text-black-300 mt-4px">
      Caption under the input.
    </p>
    <p class="text-p3 text-red-600 mt-4px hidden peer-user-invalid:flex">
      Incorrect value
    </p>
  </div>
</label>

<label class="flex flex-col gap-4px">
  <span class="flex gap-4px text-p3 font-medium items-center">
    Label
    <div class="flex relative group text-black-500 hover:text-foreground active:text-foreground">
      <div
        class="absolute rounded-8px text-white text-p4 py-8px px-12px bg-black w-[166px] opacity-0 group-hover:opacity-100 z-[-1] group-hover:z-10 left-[50%] -translate-y-full -translate-x-[50%]"
        style="transition: opacity 300ms ease-out, z-index 300ms ease-out">
        <span
          class="absolute bg-black w-[14px] h-[6px] -bottom-[5px] right-[50%] rotate-180 translate-x-[50%]"
          style="clip-path: polygon(50% 0%, 0% 100%, 100% 100%)">
        </span>
        Input tooltip
      </div>
      <span class="mt-2px">
        <svg
          width="16"
          height="16"
          viewbox="0 0 16 16"
          fill="none"
          xmlns="http://www.w3.org/2000/svg">
          <path
            d="M6.0599 5.99973C6.21663 5.55417 6.526 5.17847 6.9332 4.93915C7.3404 4.69983 7.81916 4.61235 8.28468 4.6922C8.7502 4.77205 9.17244 5.01408 9.47661 5.37541C9.78079 5.73675 9.94727 6.19408 9.94656 6.66639C9.94656 7.99973 7.94656 8.66639 7.94656 8.66639M7.99992 11.333H8.00659M14.6666 7.99967C14.6666 11.6816 11.6818 14.6663 7.99992 14.6663C4.31802 14.6663 1.33325 11.6816 1.33325 7.99967C1.33325 4.31778 4.31802 1.33301 7.99992 1.33301C11.6818 1.33301 14.6666 4.31778 14.6666 7.99967Z"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round">
          </path>
        </svg>
      </span>
    </div>
  </span>
  <div class="flex flex-col relative">
    <input
      type="text"
      name="name-with-tooltip"
      placeholder="Text"
      class="flex gap-8px items-center text-p2 peer text-black py-8px rounded-8px border placeholder:text-black-500 outline-none transition-all dark:text-white dark:placeholder:text-black-400 px-16px bg-white border-black-200 hover:border-black-600 focus:border-black-600 active:border-black-600 user-invalid:border-red-600 user-invalid:hover:border-red-600 user-invalid:focus:border-red-600 user-invalid:active:border-red-600 user-invalid:bg-red-50 dark:bg-black dark:border-black-600 dark:hover:border-black-400 dark:focus:border-black-400 dark:active:border-black-400 dark:user-invalid:bg-red-900 dark:user-invalid:bg-black shadow-[0_1px_2px_0px_#0000000D] focus:shadow-[0_0_0_2px_#0F172A33] dark:shadow-[0_1px_2px_0px_rgba(255,255,255,0.06)] dark:focus:shadow-[0_0_0_2px_rgba(255,255,255,0.33)] disabled:bg-black-50 disabled:border-black-100 dark:disabled:bg-black-800 dark:disabled:border-black-700 disabled:shadow-none"
      pattern="[a-zA-Z0-9_]+"
      value=""
      autocomplete="off"
      input_classes="">
    </input>
    <p class="text-p3 text-red-600 mt-4px hidden peer-user-invalid:flex">
      Incorrect value
    </p>
  </div>
</label>