Skip to content

Show and hide password in an input field using Alpine.js

Blog  ✺  Code Snippet  ✺  Alpine.js

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.

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:

Learn Alpine.js
Alpine.js is a refreshingly minimal JavaScript framework that gives you the reactive nature of Vue and React, but with much more simplicity. This course will get you up to speed on how to use it, with plenty of practical examples along the way.

Comments

You might like

Add Dimensions to Image and Video Uploads in Laravel

Laravel

Calm: Peaceful Pictures

Opinion  ✺  Photography