How to Show and Hide Password in React js and Next js
Published On
Password inputs have type=“password” which by default hide the password and show some points or asterisk. Consider a scenario where the user wants to see the password which they have typed so to facilitate that we can implement the toggle button to show and hide password in next.js and react.js
This is the live version. Try this.
How to toggle show password and hide password in react.js and next.js
Implementing this functionality is quite easy and just requires the basic react knowledge of conditional rendering and useState hook.
This is a minimal react component.
const Login = () => {
async function handleSubmit() {
// implement your functionality
}
return (
<form onSubmit={handleSubmit}>
<div className="mt-2 mb-3">
<label className="block" htmlFor="password">
Password
</label>
<input
className="bg-transparent border-2 border-gray-700 dark:border-gray-200 px-3 py-2 rounded-md"
type="password"
name="password"
id="password"
/>
</div>
</form>
);
};
export default Login;
Now to implement the password show and hide functionality, we will use useStateHook to store local value and will toggle the value to true to false or vice versa.
const [showPassword,setShowPassword] = useState(false)
Now let’s add a button to toggle
...rest same no changes
<input
className="bg-transparent border-2 border-gray-700 dark:border-gray-200px-3 py-2 rounded-md"
type={showPassword ? "text" : "password"}
name="password"
id="password"
/>
<button
type="button"
className="text-black dark:text-white"
onClick={() => {
setShowPassword((prev) => !prev);
}}
>
{showPassword ? "Hide" : "Show"}
</button>
So the onClick function toggle the value and based on that value the input type is either text or password.
Let’s add icons. I am using icons from lucide. Here is the complete code.
import { useState } from "react";
const ShowPassword = () => {
const [showPassword, setShowPassword] = useState(false);
return (
<>
<div className="mt-2 mb-3">
<label className="block" htmlFor="password">
Password
</label>
<div className="relative">
<input
className="bg-transparent border-2 border-gray-700 dark:border-gray-200 px-3 py-2 rounded-md"
type={showPassword ? "text" : "password"}
name="password"
id="password"
/>
<button
type="button"
aria-label={
showPassword ? "Password Visible" : "Password Invisible."
}
className="text-black dark:text-white"
onClick={() => {
setShowPassword((prev) => !prev);
}}
>
{showPassword ? (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
className="w-6 select-none cursor-pointer h-6 absolute top-2 right-2"
tabindex="-1"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"
></path>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
></path>
</svg>
) : (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
className="w-6 select-none cursor-pointer h-6 absolute top-2 right-2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"
></path>
</svg>
)}
</button>
</div>
</div>
</>
);
};
export default ShowPassword;