In this quick tutorial we are going to build an
<input /> field that allows you to toggle the password visibility with the click of a button using Alpine.js. To do this, we are going to toggle the input field
type attribute between the values
We make the following assumptions about your project, but the code is simple enough to create a version the Tailwind CSS dependency.
Feel free to fork and edit the code on Codepen.
How it works
Let's break it down real quick. We are using
x-data to initalize a component in Alpine.js and can bind attributes like
type using the colon notation
:type. Event handlers can be registered with
@ prefix, for example
Did you like it?
Let me know on twitter if you liked this quick tutorial and if you'd like to see a Laravel blade component for this in the future.
You can learn the basics of Alpine.js for free in this great course: