Input

<!-- Default -->
<label class="flex flex-col gap-4px ">
  <span class="text-p3 font-medium">Default field</span>
  <div class="flex flex-col relative">
    <input type="text"
      placeholder="Write here"
      name="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  px-16px bg-white border-black-300 hover:border-black-600 focus:border-black-600 active:border-black-600 invalid:border-red invalid:hover:border-red invalid:focus:border-red invalid:active:border-red invalid:bg-red-50 disabled:bg-black-50"
      /* default pattern, change or remove */
      pattern="[a-z]+" />
    <p class="text-p4 text-red hidden peer-invalid:flex">
      Incorrect value
    </p>
  </div>
</label>
<!-- Disabled -->
<label class="flex flex-col gap-4px ">
  <span class="text-p3 font-medium">Default field (disabled)</span>
  <div class="flex flex-col relative">
    <input type="text"
      placeholder="Write here"
      name="text-1"
      class="flex gap-8px items-center text-p2 peer text-black py-8px rounded-8px border placeholder:text-black-500 outline-none transition-all  px-16px bg-white border-black-300 hover:border-black-600 focus:border-black-600 active:border-black-600 invalid:border-red invalid:hover:border-red invalid:focus:border-red invalid:active:border-red invalid:bg-red-50 disabled:bg-black-50"
      /* default pattern, change or remove */
      pattern="[a-z]+"
      disabled />
    <p class="text-p4 text-red hidden peer-invalid:flex">
      Incorrect value
    </p>
  </div>
</label>

<!-- Password -->
<label class="flex flex-col gap-4px ">
  <span class="text-p3 font-medium">Password</span>
  <div class="flex flex-col relative">
    <input type="password"
      placeholder="••••••••••"
      name="pass"
      class="flex gap-8px items-center text-p2 peer text-black py-8px rounded-8px border placeholder:text-black-500 outline-none transition-all  px-16px bg-white border-black-300 hover:border-black-600 focus:border-black-600 active:border-black-600 invalid:border-red invalid:hover:border-red invalid:focus:border-red invalid:active:border-red invalid:bg-red-50 disabled:bg-black-50"
      /* default pattern, change or remove */
      pattern="[a-z]+" />
    <p class="text-p4 text-red hidden peer-invalid:flex">
      Incorrect value
    </p>
  </div>
</label>
<!-- Disabled -->
<label class="flex flex-col gap-4px ">
  <span class="text-p3 font-medium">Password (disabled)</span>
  <div class="flex flex-col relative">
    <input type="password"
      placeholder="••••••••••"
      name="pass-1"
      class="flex gap-8px items-center text-p2 peer text-black py-8px rounded-8px border placeholder:text-black-500 outline-none transition-all  px-16px bg-white border-black-300 hover:border-black-600 focus:border-black-600 active:border-black-600 invalid:border-red invalid:hover:border-red invalid:focus:border-red invalid:active:border-red invalid:bg-red-50 disabled:bg-black-50"
      /* default pattern, change or remove */
      pattern="[a-z]+"
      disabled />
    <p class="text-p4 text-red hidden peer-invalid:flex">
      Incorrect value
    </p>
  </div>
</label>

<!-- Search -->
<label class="flex flex-col gap-4px ">
  <span class="text-p3 font-medium">Search</span>
  <div class="flex flex-col relative">
    <input type="text"
      placeholder="Search"
      name="search"
      class="flex gap-8px items-center text-p2 peer text-black py-8px rounded-8px border placeholder:text-black-500 outline-none transition-all  ps-[40px] pe-16px bg-white border-black-300 hover:border-black-600 focus:border-black-600 active:border-black-600 invalid:border-red invalid:hover:border-red invalid:focus:border-red invalid:active:border-red invalid:bg-red-50 disabled:bg-black-50"
      /* default pattern, change or remove */
      pattern="[a-z]+" />
    <span class="absolute left-16px top-[14px] pointer-events-none">
      <svg width="16"
  height="16"
  viewBox="0 0 16 16"
  fill="none"
  xmlns="http://www.w3.org/2000/svg">
  <g clip-path="url(#clip0_48_1939)">
    <path d="M6.66667 11.3333C9.244 11.3333 11.3333 9.244 11.3333 6.66667C11.3333 4.08934 9.244 2 6.66667 2C4.08934 2 2 4.08934 2 6.66667C2 9.244 4.08934 11.3333 6.66667 11.3333Z"
      stroke="#8A8C97"
      stroke-linecap="round"
      stroke-linejoin="round"/>
    <path d="M14 14L10 10"
      stroke="#8A8C97"
      stroke-linecap="round"
      stroke-linejoin="round"/>
  </g>
</svg>
    </span>
    <p class="text-p4 text-red hidden peer-invalid:flex">
      Incorrect value
    </p>
  </div>
</label>
<!-- Disabled -->
<label class="flex flex-col gap-4px ">
  <span class="text-p3 font-medium">Search (disabled)</span>
  <div class="flex flex-col relative">
    <input type="text"
      placeholder="Search"
      name="search-2"
      class="flex gap-8px items-center text-p2 peer text-black py-8px rounded-8px border placeholder:text-black-500 outline-none transition-all  ps-[40px] pe-16px bg-white border-black-300 hover:border-black-600 focus:border-black-600 active:border-black-600 invalid:border-red invalid:hover:border-red invalid:focus:border-red invalid:active:border-red invalid:bg-red-50 disabled:bg-black-50"
      /* default pattern, change or remove */
      pattern="[a-z]+"
      disabled />
    <span class="absolute left-16px top-[14px] pointer-events-none">
      <svg width="16"
  height="16"
  viewBox="0 0 16 16"
  fill="none"
  xmlns="http://www.w3.org/2000/svg">
  <g clip-path="url(#clip0_48_1939)">
    <path d="M6.66667 11.3333C9.244 11.3333 11.3333 9.244 11.3333 6.66667C11.3333 4.08934 9.244 2 6.66667 2C4.08934 2 2 4.08934 2 6.66667C2 9.244 4.08934 11.3333 6.66667 11.3333Z"
      stroke="#8A8C97"
      stroke-linecap="round"
      stroke-linejoin="round"/>
    <path d="M14 14L10 10"
      stroke="#8A8C97"
      stroke-linecap="round"
      stroke-linejoin="round"/>
  </g>
</svg>
    </span>
    <p class="text-p4 text-red hidden peer-invalid:flex">
      Incorrect value
    </p>
  </div>
</label>

<!-- Text Area -->
<label class="flex flex-col gap-4px ">
  <span class="text-p3 font-medium">Text Area</span>
  <textarea class="text-p2 text-black py-8px px-16px rounded-8px border outline-none placeholder:text-black-500 transition-all  bg-white border-black-300 hover:border-black-600 focus:border-black-600 active:border-black-600 disabled:bg-black-50 disabled:resize-none"
    placeholder="Write here"
    name="textarea"></textarea>
</label>
<!-- Disabled -->
<label class="flex flex-col gap-4px ">
  <span class="text-p3 font-medium">Text Area (disabled)</span>
  <textarea class="text-p2 text-black py-8px px-16px rounded-8px border outline-none placeholder:text-black-500 transition-all  bg-white border-black-300 hover:border-black-600 focus:border-black-600 active:border-black-600 disabled:bg-black-50 disabled:resize-none"
    placeholder="Write here"
    name="textarea-1"
    disabled></textarea>
</label>