Guidelines for password boxes

Applies to Windows and Windows Phone

Windows app: a password box, with password reveal

Windows app: a password box, with password reveal

Windows Phone app: a password box, with password reveal

Windows Phone app: a password box, with password reveal

Description

A password box is a text input box that conceals the characters typed into it for the purpose of privacy.

A password box looks like a text input box, except that it renders bullets in place of the text that has been entered. The bullet character can be configured.

After the user operates the control, or changes are saved, the bullets continue to display. However, the number of bullets that remain won’t necessarily equal the number of characters entered.

When a user taps a password box that has already been filled in, the existing bullets become highlighted, allowing typing to replace the existing value.

  • Applies to Windows Phone

On Windows Phone, each character entered by the user is shown only for an instant and is then normalized to a bullet.

Is this the right control?

Use a password box to let the user enter sensitive data that it’s very important no one can see over their shoulder. A password box is a more private version of a text input box.

A password box can collect a password or other private data such as a Social Security number. The reduced feedback of what’s being typed makes typos harder to spot, though. For more than a word or two of input, consider turning on the password reveal button so that the user can briefly peek at what’s been typed.

Dos and don'ts

  • When a user is creating an account, and entering a username and password, consider presenting two password boxes, one for the password, and a second one to confirm the password.
  • When a user is logging on, present only a single password box.
  • When the user is entering a PIN, consider respond the instant the final, correct character has been entered, rather than needing a confirmation button to be pressed. That might mean dismissing the logon dialog, or navigating to the next page in the workflow.

Related topics

For designers
Guidelines for text input
For developers (HTML)
input type=password element | input type=password object
For developers (XAML)
Windows.UI.Xaml.Controls PasswordBox class

 

 

Show:
© 2014 Microsoft