Password Input

Use the password input component to let users enter a password with the option to show what they've typed.

When to Use

• When users need to create a new password
• When users need to enter an existing password
• The show/hide toggle helps users check for typing errors

Default Password Input

<div class="form-group">
  <label class="form-label" for="password">Create a password</label>
  <p class="form-hint" id="password-hint">
    Your password must be at least 8 characters and include a number.
  </p>
  <div class="password-input">
    <input
      class="form-input"
      id="password"
      name="password"
      type="password"
      autocomplete="new-password"
      aria-describedby="password-hint"
    >
    <button type="button" class="password-toggle" aria-label="Show password">
      Show
    </button>
  </div>
</div>

With Error State

Confirm Password

When asking users to create a password, also ask them to confirm it.

JavaScript Behaviour

// Toggle password visibility
document.querySelectorAll('.password-toggle').forEach(button => {
  button.addEventListener('click', function() {
    const input = this.previousElementSibling;
    const isPassword = input.type === 'password';

    input.type = isPassword ? 'text' : 'password';
    this.textContent = isPassword ? 'Hide' : 'Show';
    this.setAttribute('aria-label', isPassword ? 'Hide password' : 'Show password');
  });
});

Accessibility

• The toggle button has an aria-label that updates when clicked
• Use autocomplete="new-password" for creating passwords
• Use autocomplete="current-password" for logging in
• Don't prevent pasting into password fields - users may use password managers

Password Requirements

For government services, passwords should:

• Be at least 8 characters long
• Not be a commonly used password
• Include a mix of letters and numbers (recommended)

See the Passwords pattern for detailed guidance.