Toggle Password

Basic Usage

A basic usage of Tailwind Toggle Password component.

<div class="relative max-w-72" data-mv-toggle-password="true">
  <input type="password" class="mv-input pe-10" placeholder="Password" /><button
    class="mv-btn mv-btn-icon mv-btn-ghost size-6 absolute end-2 top-1/2 -translate-y-1/2"
    data-mv-toggle-password-trigger="true"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
      class="lucide lucide-eye mv-toggle-password-active:hidden"
      aria-hidden="true"
    >
      <path
        d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"
      ></path>
      <circle cx="12" cy="12" r="3"></circle></svg
    ><svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
      class="lucide lucide-eye-off hidden mv-toggle-password-active:block"
      aria-hidden="true"
    >
      <path
        d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"
      ></path>
      <path d="M14.084 14.158a3 3 0 0 1-4.242-4.242"></path>
      <path
        d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"
      ></path>
      <path d="m2 2 20 20"></path>
    </svg>
  </button>
</div>

Permanent

Use data-mv-toggle-password-permanent="true" attribute to set whether the password remains visible once unmasked, even after typing begins.

<div
  class="relative max-w-72"
  data-mv-toggle-password="true"
  data-mv-toggle-password-permanent="true"
>
  <input type="password" class="mv-input pe-10" placeholder="Password" /><button
    class="mv-btn mv-btn-icon mv-btn-ghost size-6 absolute end-2 top-1/2 -translate-y-1/2"
    data-mv-toggle-password-trigger="true"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
      class="lucide lucide-eye mv-toggle-password-active:hidden"
      aria-hidden="true"
    >
      <path
        d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"
      ></path>
      <circle cx="12" cy="12" r="3"></circle></svg
    ><svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
      class="lucide lucide-eye-off hidden mv-toggle-password-active:block"
      aria-hidden="true"
    >
      <path
        d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"
      ></path>
      <path d="M14.084 14.158a3 3 0 0 1-4.242-4.242"></path>
      <path
        d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"
      ></path>
      <path d="m2 2 20 20"></path>
    </svg>
  </button>
</div>