Alpine js hide show Password with Tailwind CSS  Example

In this tutorial we will see hide and show password using Apline Js .in this section we will use tailwind css for ui you can use any css

framework if you want.

Why we use Alpine js for this because Alpine js is a lightweight library it bundle size is just 6.4 kb it download time is better thane jquery 



Tools use

Tailwind CSS 2 CDN

Apline js 2.8 CDN


Tailwind CSS 2 CDN

in this section i use tailwind css, you can use any css Framework

<link href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">


Apline js 2.8 CDN

use defer attribute , defer attribute specifies that the script is executed when the page has finished parsing. if you are put script in before </head> then use defer .

<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>


<!DOCTYPE html>
<html lang="en">
    
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title> Alpine js hide show Password  Example </title>
    <link href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>
</head>

<body>
</body>

</html>

Next, you need to create ui


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title> Alpine js hide show Password  Example </title>
    <link href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>
</head>

<body>
    <div class="flex flex-col items-center justify-center bg-gray-300 h-screen">
        <div class="flex flex-col bg-white px-4 py-8 l w-full max-w-md ">
            <div class="mt-10">
                <form method="POST" action="">
                    <div class="relative w-full mb-3">
                        <label for="email">Email</label>
                        <input type="email" name="email" class="border-0 p-4 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full" placeholder="Email" /> </div>
                    <div class="relative w-full mb-3">
                        <label for="password">Password</label>
                        <input type="password" name="password" class="border-0 p-4 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full" placeholder="Password" />
                        <div class=" absolute inset-y-0 right-0 pr-3 flex items-center text-sm leading-5 ">
                            <p class=" mt-5">Show</p>
                        </div>
                    </div>
                    <div class=" text-center mt-6 ">
                        <button type="submit" class="p-3 rounded-lg bg-purple-600 outline-none text-white shadow w-32 justify-center
                                focus:bg-purple-700 hover:bg-purple-500 ">Login</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>
  
  </html>

Now, you need to put div x-data declares a new component scope. It tells the framework to initialize a new component with the data object.

define x-data="{ show: true }" next, you need to bind input type using x-bind or : (:type="show ? 'password' : 'text'") then create

click event @click="show=! show" and bind text using x-text=" show ? 'Show' : 'Hide' "


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title> Alpine js hide show Password  Example </title>
    <link href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>
</head>

<body>
    <div class="flex flex-col items-center justify-center bg-gray-300 h-screen">
        <div class="flex flex-col bg-white px-4 py-8 l w-full max-w-md ">
            <div class="mt-10">
                <form method="POST" action="">
                    <div class="relative w-full mb-3">
                        <label for="email">Email</label>
                        <input type="email" name="email" class="border-0 p-4 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full" placeholder="Email" /> </div>
                    <div class="relative w-full mb-3" x-data="{ show: true }">
                        <label for="password">Password</label>
                        <input :type="show ? 'password' : 'text'" name="password" class="border-0 p-4 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full" placeholder="Password" />
                        <div class=" absolute inset-y-0 right-0 pr-3 flex items-center text-sm leading-5 ">
                            <p class=" mt-5" @click="show=! show" x-text=" show ? 'Show' : 'Hide' "></p>
                        </div>
                    </div>
                    <div class=" text-center mt-6 ">
                        <button type=" submit " class=" p-3 rounded-lg bg-purple-600 outline-none text-white shadow w-32 justify-center
                                focus:bg-purple-700 hover:bg-purple-500 ">Login</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>

</html>

Now,before password show

Now,After password show


Tags: