Password Show Hide Input

<div class="password-field">

  <label for="password-input">
    Password
  </label>

  <div class="password-input-wrap">

    <input
      type="password"
      id="password-input"
      placeholder="Enter your password"
    >

    <button
      type="button"
      class="password-toggle"
      data-password-toggle
      aria-label="Show password"
    >
      Show
    </button>

  </div>

</div>

.password-field{
  width:100%;
  max-width:420px;
}

.password-field label{
  display:block;
  margin-bottom:9px;

  color:#aab4c8;
  font-size:13px;
  font-weight:600;
}

.password-input-wrap{
  position:relative;
}

.password-input-wrap input{
  width:100%;
  padding:15px 82px 15px 16px;

  border:1px solid #263750;
  border-radius:10px;
  outline:none;

  background:#0b1423;
  color:#ffffff;

  font-size:16px;

  transition:.25s ease;
}

.password-input-wrap input::placeholder{
  color:#65748b;
}

.password-input-wrap input:focus{
  border-color:#22d3ee;

  box-shadow:
    0 0 0 3px rgba(34,211,238,.10);
}

.password-toggle{
  position:absolute;
  top:50%;
  right:10px;

  transform:translateY(-50%);

  padding:7px 10px;

  border:0;
  border-radius:7px;

  background:#101c2e;
  color:#22d3ee;

  font-size:12px;
  font-weight:700;

  cursor:pointer;

  transition:.2s ease;
}

.password-toggle:hover{
  background:#16263d;
  color:#ffffff;
}

const passwordInput = document.getElementById('password-input');
const passwordToggle = document.querySelector('[data-password-toggle]');

passwordToggle.addEventListener('click', function() {

  const isHidden = passwordInput.type === 'password';

  passwordInput.type = isHidden ? 'text' : 'password';

  passwordToggle.textContent = isHidden ? 'Hide' : 'Show';

  passwordToggle.setAttribute(
    'aria-label',
    isHidden ? 'Hide password' : 'Show password'
  );

});

How This Password Show Hide Input Works

This Password Show Hide Input combines a native password field with a small JavaScript-controlled button that switches the password between hidden and visible states. The component also updates the button text and its accessible label so both stay consistent with the current state.

The HTML begins with a .password-field container containing a “Password” label. The label uses for="password-input", which matches the input’s id. Inside .password-input-wrap, the component places the password input and the Show button together.

The input initially uses type="password". This tells the browser to conceal the entered characters rather than displaying them as normal text. Its placeholder reads “Enter your password.”

The Show control is a regular <button type="button">. Using type="button" prevents it from acting as a submit button if this component is later placed inside a form. It also includes data-password-toggle, which JavaScript uses to select the element, and begins with aria-label="Show password".

CSS limits .password-field to a maximum width of 420px while allowing it to fill narrower containers. The .password-input-wrap uses position: relative, creating the positioning reference for the toggle button.

The input has 15px vertical padding, 16px left padding, and 82px right padding. The extra space on the right is important because the Show or Hide button sits inside the same visual field area. Without that additional padding, longer password content could extend underneath the button.

The field uses a dark #0b1423 background, a 1px #263750 border, and 10px rounded corners. When it receives focus, the border changes to cyan #22d3ee and a three-pixel cyan-tinted focus ring appears. A .25s ease transition smooths the change.

The toggle button is absolutely positioned 10px from the right and vertically centered with top: 50% and transform: translateY(-50%). It uses a dark #101c2e background, cyan text, 7px rounded corners, and a compact 12px bold font. On hover, its background changes to #16263d and the text becomes white.

JavaScript selects the input with document.getElementById('password-input') and the button with document.querySelector('[data-password-toggle]'). A click event listener handles the visibility change.

Each time the button is clicked, the code checks whether passwordInput.type === 'password'. That result is stored in isHidden. A conditional expression then changes the input type to "text" when the password is hidden or back to "password" when it is currently visible.

The same state controls the button text. “Show” becomes “Hide” when the password is revealed, and switches back when it is concealed again. JavaScript also updates aria-label between “Show password” and “Hide password.” For more information about modifying element attributes from JavaScript, see the MDN setAttribute documentation.

The component only controls password visibility. It does not validate password strength, submit a login form, store credentials, or perform authentication.

Customizing the Password Show Hide Input

The existing HTML, CSS, and JavaScript provide several values that can be adapted for different login and registration interfaces.

• Change max-width: 420px to control the maximum width of the password field.
• Adjust the input’s 15px 82px 15px 16px padding if the field or toggle button dimensions change.
• Replace #0b1423 to customize the input background.
• Change #22d3ee to use a different focus and toggle-button accent color.
• Edit the 10px input border radius or 7px button radius to change the corner styling.
• Adjust the toggle’s right: 10px value or padding to reposition or resize the Show/Hide control.
• Modify the .25s input and .2s button transitions to change the interaction timing.
• Replace the Password label, placeholder, or Show/Hide button wording while keeping the JavaScript state updates consistent.

Where to Use This Password Show Hide Input

A password visibility control is useful wherever users enter concealed credentials and may want to verify what they typed.

• Login forms
• Registration forms
• Password reset pages
• Account security settings
• Password confirmation fields
• Member portals
• Authentication screens

For a complete authentication interface containing email and password fields, the Circular Gradient Login Form is a related CodeRipple component. This standalone field only changes password visibility, so authentication and submission behavior would need to be handled separately.

Frequently Asked Questions

How does the Show button reveal the password?

JavaScript checks the input’s current type. If it is "password", the script changes it to "text", which makes the entered characters visible.

What happens when the password is already visible?

Clicking Hide changes the input type from "text" back to "password". The button text also returns to “Show.”

Does the accessible label change with the password state?

Yes. JavaScript changes the button’s aria-label between “Show password” and “Hide password” using setAttribute().

Does this component validate or submit the password?

No. There is no validation, form submission, password-strength checking, or authentication logic. The JavaScript only manages visibility and the corresponding button state.

This Password Show Hide Input keeps password visibility logic focused on a single control while maintaining matching button text and accessibility attributes for both hidden and visible states.