Font and theme export

Password

Password fields with an accessible show/hide button, keyboard support, and configurable labels.

Basic example

Use type="password" with the same input wrapper and label as a text field. The browser hides the characters as you type.

<div class="input-field">
    <input id="password" name="password" type="password" class="validate" placeholder=" " maxlength="20" autocomplete="current-password">
    <label for="password">Password</label>
</div>

Setup

Start with the kmaterialize CSS and JavaScript from Getting started, then follow the component setup below.

A plain password field needs the same assets as text inputs. Initialize PasswordInput only when adding the show/hide toggle.

import { PasswordInput } from 'kmaterialize';

const instances = PasswordInput.init(document.querySelectorAll('input[data-password-toggle]'));

Initialization updates the icon, aria-label, aria-pressed, and aria-controls. Disabled inputs cannot be revealed; readonly inputs can. Native buttons support keyboard activation automatically. Existing suffix wrappers remain supported.

Initialize each field once with PasswordInput.init() or M.AutoInit(). These live examples use the shared documentation initializer.

Examples and variants

Show/hide toggle

Add data-password-toggle to the input and data-password-toggle-icon to a transparent crazy-button suffix, then initialize PasswordInput. Click the eye or focus the button and press Enter or Space to show or hide the password. The round button shows circular feedback when pressed. Its value and selection stay unchanged.

<div class="input-field">
    <crazy-button class="suffix" data-password-toggle-icon type="icon" size="sm" shape="round" variant="text" color-primary="transparent" color-secondary="var(--md-sys-color-on-surface-variant)" wave="dark" icon-text="visibility" aria-label="Show password"></crazy-button>
    <input id="password-toggle-example" type="password" class="validate" data-password-toggle placeholder=" ">
    <label for="password-toggle-example">Password</label>
</div>

Validation

Use required for an empty password and minlength/maxlength for your application’s length rules. Do not log passwords in validation messages. Browsers usually stop typing at the maximum; validate saved or programmatically assigned values separately.

These previews keep their error state visible. In your form, show errors after checking a field or submitting, then clear them when the value is valid.

For text fields, use .input-field.error, aria-invalid="true", and a message linked with aria-describedby. Remove the error state when resolved. Use aria-live="polite" for messages updated dynamically.

Required
Enter your password.
Minimum length
Use at least 8 characters. 
<div class="input-field outlined error">
    <i class="material-icons suffix" aria-hidden="true">error</i>
    <input id="validation-password" type="password" required autocomplete="off" placeholder=" " value="" aria-invalid="true" aria-describedby="validation-password-error">
    <label for="validation-password">Password</label>
    <span id="validation-password-error" class="supporting-text">Enter your password.</span>
</div>

<div class="input-field error">
    <i class="material-icons suffix" aria-hidden="true">error</i>
    <input id="validation-new-password" type="password" minlength="8" maxlength="64" autocomplete="new-password" placeholder=" " value="short" aria-invalid="true" aria-describedby="validation-new-password-error">
    <label for="validation-new-password">New password</label>
    <span id="validation-new-password-error" class="supporting-text">Use at least 8 characters.</span>
</div>

Reference

Custom labels and lifecycle

const input = document.querySelector('#password-toggle-example');
const instance = PasswordInput.init(input, {
    showLabel: 'Show password',
    hideLabel: 'Hide password'
});

instance.toggle(); // Show or hide without changing the value.
instance.destroy(); // Remove listeners before removing the field.