How to Build a Modern Password Input Field with Toggle Visibility

In modern web applications, user experience is crucial, especially for login and signup forms. One common feature is the ability to show or hide password input. In this blog, we will create a stylish password input field with a lock icon and an eye toggle feature, using HTML, CSS, and JavaScript.

Features of Our Password Input Field:

A lock icon on the left side
An eye icon on the right to toggle password visibility
Smooth animations for a visually appealing effect
A clean and minimalistic design

HTML Structure

We start by creating a div container that holds the password input field, a lock icon, and an eye icon for toggling the password visibility.

	<div class="container">
		<svg id="lock" width="28" height="28" viewBox="0 0 55 55">
		  <path d="M44.05064,26.35243a2.79478,2.79478,0,0,0-2.05238-.845h-.96642V19.70883a13.01549,13.01549,0,0,0-3.98477-9.54056A13.01759,13.01759,0,0,0,27.5042,6.18119a13.01466,13.01466,0,0,0-9.54288,3.98708,13.01551,13.01551,0,0,0-3.98476,9.54056v5.79855h-.96644a2.88526,2.88526,0,0,0-2.89926,2.89927V45.8a2.886,2.886,0,0,0,2.89926,2.89927H41.99826A2.886,2.886,0,0,0,44.89753,45.8V28.40666a2.79637,2.79637,0,0,0-.84689-2.05423Zm-8.8169-.845H19.7728V19.70883a7.73329,7.73329,0,0,1,7.7314-7.72909,7.73013,7.73013,0,0,1,7.72955,7.72909Zm0,0"/>
		</svg>
		<input type="password" placeholder="Password" id="password">
		<div id="eye-wrapper" onclick="toggle()">
			<svg id="open" width="25" height="25">
			  <g stroke="#7D4262" stroke-miterlimit="10">
			    <path d="M21.632 12.5a9.759 9.759 0 01-18.264 0 9.759 9.759 0 0118.264 0z" fill="none"/>
			    <circle cx="12.5" cy="12.5" r="3" fill="#7D4262"/>
			    <path fill="none" d="M12.5 5v1-4M9.291 6.337L7.709 2.663M15.709 6.337l1.582-3.674"/>
			  </g>
			</svg>
			<svg id="close" width="25" height="25">
			  <g fill="none" stroke="#7D4262" stroke-miterlimit="10">
			    <path d="M21.632 12.5a9.759 9.759 0 01-18.264 0M12.5 19.5v-1 4M9.291 18.163l-1.582 3.674M15.709 18.163l1.582 3.674"/>
			  </g>
			</svg>
		</div>		
	</div>

HTML

Styling with CSS

The CSS styles make our input field aesthetically pleasing. We add colors, positioning, and transitions for a smooth effect.

body{
			background-color: #7D4262;
			padding: 0;
			margin: 0;
			height: 100vh;
			width: 100vw;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.container{
			background-color: #121726;
			height: 55px;
			width: 280px;
			position: relative;
			border-radius: 5px;
			overflow: hidden;
			z-index: 0;
		}
		input{
			width:230px;
			position: absolute;
			left: 0px;
			font-size: 18px;
			transform: translate(0,-50%);
			top: 50%;
			border:none;
			box-sizing: border-box;
			padding-left: 40px;
			background-color: transparent;
			color: #7D4262;
			font-family: 'Poppins',sans-serif;
			font-weight: 500;
			letter-spacing: 0.8px;
			outline: none;
			z-index: 2;
		}
		::placeholder{
			color: #7D4262;
		}
		#lock{
			fill:white;
			position: absolute;
			transform: translate(0,-50%);
			top: 46%;
			left: 8px;
			z-index: 2;
			transition: 0.5s;
		}
		#eye-wrapper{
			height: 25px;
			width: 25px;
			border-radius: 50%;
			position: absolute;
			transform: translate(0,-50%);
			top: 50%;
			right: 15px;
			background-color: white;
			transition: 0.5s;
			cursor: pointer;
			z-index: 1;
		}
		#open,#close{
			stroke-width:2px;
			position: absolute;
			top: 0.5px;
		}
		#open{
			display: none;
		}
a{
  color: white;
  font-family: "Rubik",sans-serif;
  position:absolute;
  right:20px ;
  top:20px;
  border:2px solid white;
  text-decoration:none;
}
@media screen and (min-width: 451px) {
a{
  font-size: 22px;
   padding:8px 12px 8px 12px;
}
}

@media screen and (max-width: 450px) {
a{
  font-size: 15px;
   padding:5px 8px 5px 8px;
}
}

CSS

Adding Functionality with JavaScript

The JavaScript function toggles the password visibility and adds animation effects to the icons.

var state = false;
		function toggle(){	
			if(state){
	 			document.getElementById("password").setAttribute("type","password");
				document.getElementById("eye-wrapper").style.boxShadow = '0 0 0 0px white';
				document.getElementById("lock").style.fill = 'white';
				document.getElementById("open").style.display= 'none';
	 			document.getElementById("close").style.display= 'block';
				state = false;
			}
			else{
				document.getElementById("password").setAttribute("type","text");
	 			document.getElementById("eye-wrapper").style.boxShadow = '0 0 0 250px white';
	 			document.getElementById("lock").style.fill = '#121726';
	 			document.getElementById("open").style.display= 'block';
	 			document.getElementById("close").style.display= 'none';
				state = true;
			}
		}

JavaScript

Final Thoughts

This password input field is not only functional but also visually appealing. It improves user experience by allowing them to check their password while maintaining a clean UI. You can customize the colors and icons to match your project’s theme.

🚀 Try it out and enhance your login form today! Let me know if you have any suggestions or improvements.