Show Hide Password TailwindCSS and AlpineJS
Tailwind CSS Alpine JS
Demo
This is a free component. Login to your account to view / download the component code.
Code
<div x-data="{
showPassword : false
}">
<label for="password" class="block text-sm font-medium text-gray-600">Password</label>
<div class="mt-1 relative rounded-md shadow-sm">
<input :type="showPassword ? 'text' : 'password'" name="password" id="password" class="border p-2 focus:ring-indigo-500 focus:border-indigo-500 block w-full pr-10 sm:text-sm border-gray-300 rounded-md" placeholder="Enter password">
<div x-on:click="showPassword = !showPassword" class="absolute inset-y-0 right-0 pr-3 flex items-center cursor-pointer">
<i class="fa" :class="showPassword ? 'fa-eye' : 'fa-eye-slash'"></i>
</div>
</div>
</div>
Documentation
This example uses AlpineJS to show and hide password field using TailwindCSS as the front end. On clicking of the show/hide icon we change the toggle the showPassword property. Which is binded to the type attribute of the input to switch between type text and password.