Toggle the visibility on a password input field with Alpine.js: https://silvanhagen.com/toggle-password-visibility-alpinejs

toggle-password-visbility-alpine-js.html

<!-- Define the Alpine.js component using x-data -->
<div x-data="{ show: false }">

  <!-- Bind the type attribute to the value of show using the :type notation -->
  <input :type="show ? 'text' : 'password'" name="password" type="password" value="LookMaaGreatPassw0rd!" />
  
 
  <!-- Toggle the value of show on click using @click and bind the class
        attribute to it using the :class notation -->
  <svg @click="show = !show" :class="{'block': !show, 'hidden':show }">...</svg>
  
  <!-- And the same goes for the svg hidden by default. -->
  <svg @click="show = !show" :class="{'hidden': !show, 'block':show }">...</svg>
</div>