Form

Password input

Published on

Description

The password input masks entered characters for security. Pair with a show/hide toggle button to allow users to verify their input.

Example

Open in new tab
View HTML markup 
  <form method="POST" novalidate="">
  <div><label for="password">
      <hgroup>
        <h1>Password</h1>
      </hgroup>
    </label> <span id="password-hint">You should probably use PassKeys instead</span> <input value="" id="password" name="password" autocapitalize="off" autocorrect="off" spellcheck="false" autocomplete="current-password" type="password" aria-describedby="password-hint" /> </div> <button type="button">Submit</button>
  <p>Need help? <a href="/form/input-password" target="_top">View our guidance </a></p>
</form>

Accessibility

  • Use explicit <label for="id"> association.
  • Use autocomplete="current-password" for login or autocomplete="new-password" for registration.
  • Show/hide toggle should be a <button> (not a checkbox) with aria-pressed state to communicate the toggle state.
  • Don't disable the input during async operations. Use error messages or status announcements instead.

References

Variables

None for input