Password input

How to use password input

Use the password input on sign-in forms so that users can enter their password. Use it on registration forms to help users to create a secure and memorable password.

When using a password input:

• Clearly label the input field so users know that it’s for a password
• Programmatically connect the label to the input field
• Give clear instructions on mandatory values and length
• Make sure that validation messages and hints are announced to screen reader users

Types of password input

Standard

The standard password input allows the user to enter or create a password.

<PasswordField name="password-field-1" label="Password" />

With visibility toggle

A visibility toggle gives users the option to show their password as readable text.

This feature is particularly useful on a mobile where accurate typing is more difficult.

It can also be used in place of a second 'confirm password' field when the user is creating a new password.

<PasswordField name="password-field-2" label="Password" hasToggle />

With strength hint

Use a password strength hint to show users how secure the password they’re entering is.

This encourages users to create more secure passwords without forcing them stick to strict password requirements.

<PasswordField name="password-field-3" label="Password" strengthIndicator />

With error message

Use an error message to show if the user’s password has not met the password security requirements. But remember that any password requirements should be made clear right away.

<PasswordField
  name="password-field-4"
  label="Password"
  error={
    <span>
      <p className="ln-u-display-inline-block ln-u-margin-bottom">
        Your password must have:
      </p>
      <ul className="ln-u-flush-bottom ln-u-margin-left*4">
        <li>8 to 100 characters in length</li>
        <li>
          At least:
          <ul>
            <li>1 uppercase letter (A-Z)</li>
            <li>1 lowercase letter (a-z)</li>
            <li>1 number (0-9)</li>
          </ul>
        </li>
      </ul>
    </span>
  }
/>

Was this page helpful?