Passwords

Obscure passwords and other sensitive information as the user types. An optional web component can be used to toggle password visibility on and off.

Password Field

Obscure text inputs with the [type="password"] attribute.

Password

<label for="password">Password</label>
<input type="password" id="password" name="password">

Toggle Visibility

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 Toggle 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> 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();