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 text and password .
Prerequisites
We make the following assumptions about your project, but the code is simple enough to create a version the Tailwind CSS dependency.
- Tailwind CSS for styling
- Alpine.js already installed in your project
The result
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 class or type using the colon notation :type. Event handlers can be registered with @ prefix, for example @click.
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:
