Toggle Password

Let users toggle the visibility of a [type="password"] input with a button or checkbox.

Usage

Wrap your input[type="password"] in a <kelp-toggle-pw> element.

Include either a <button> or an input[type="checkbox"] element to control the password field visibility, and add a [toggle] attribute to it.

The component adds the required [aria-pressed] attribute if you’re using a <button>, and hides the [toggle] (and parent <label>, if applicable) until the component instantiates.

Checkbox

Password Show password

<kelp-toggle-pw>
	<label for="password">Password</label>
	<input type="password" id="password">

	<label>
		<input type="checkbox" toggle>
		Show password
	</label>
</kelp-toggle-pw>

Button

Password

<kelp-toggle-pw>
	<label for="password">Password</label>
	<input type="password" id="password">

	<button toggle>Toggle Password</button>
</kelp-toggle-pw>

Options

Visible by Default

Add the [visible] attribute to the <kelp-toggle-pw> component to make the password visible by default.

Password Show password

<kelp-toggle-pw visible>
	<label for="password">Password</label>
	<input type="password" id="password">

	<label>
		<input type="checkbox" toggle>
		Show password
	</label>
</kelp-toggle-pw>

Show/Hide Icons

If you’re using a <button> as your <toggle>, you can show different icons when the password is hidden or visible.

Add an [is-hidden] attribute to the content that should display when the password is hidden, and an [is-visible] attribute to the content that should display when it’s visible.

Make sure to include an [aria-label] or text with the .visually-hidden class so that there’s an accessible label for screen reader users.

Password

<kelp-toggle-pw>
	<label for="password">Password</label>
	<input type="password" id="password" value="now you don't">
	<button 
		toggle 
		aria-label="toggle password visibility"
	>
		<span is-hidden>Show</span>
		<span is-visible>Hide</span>
	</button>
</kelp-toggle-pw>

Events

The <kelp-toggle-pw> element emits a few events.

kelp-toggle-pw:ready emits when the component is instantiated.
kelp-toggle-pw:show emits when the password is shown.
kelp-toggle-pw:hide emits when the password is hidden.

document.addEventListener('kelp-toggle-pw:ready', (event) => {
	console.log('ready:', event.target);
});

document.addEventListener('kelp-toggle-pw:show', (event) => {
	console.log('Password is visible on:', event.target);
});

document.addEventListener('kelp-toggle-pw:hide', (event) => {
	console.log('Password is hidden on:', event.target);
});

Methods & Properties

While web components are self-instantiating, the <kelp-toggle-pw-ready> element has a few methods and properties you can manually run if needed.

.isVisible - If true, password is visible.
.show() - Show the password.
.hide() - Hide the password.
.toggle() - Toggle password visibility (show it if it’s hidden, hide it if it’s visible).
.init() - Manually initialize the component, if it fails for some reason.

const togglePW = document.querySelector('kelp-toggle-pw');

// Check if password is currently visible
if (togglePW.isVisible) {
	console.log('The password is visible!');
}

// Show the password
togglePW.show();

// Hide the password
togglePW.hide();

// Toggle visibility
togglePW.toggle();

Documentation