Password input

Lets users enter their password as part of a login or authentication process.

When to use

Use a password input:

  • when asking for a user's password as part of a login or authentication process

Don't use a password input:

  • if you need the text the user enters to be visible (use text input instead)

Best practice
  • Hide the text by default — users can choose to show the content of the field with the built-in action if they want to.
  • Only use the information message if you have evidence that users need more context.



Label copy should:

  • be no more than 3 words

  • be a noun that describes the information the user needs to enter (and not a verb)

Information message (optional)

Information message copy should:

  • be a single sentence

  • give some extra context to help the user enter the right information


Placeholders are not supported in most of our components, since (according to our research):

  • people may confuse the content with real values

  • lack of contrast make them usually difficult to read

  • they are often used with dummy values, so aren’t helpful to our users

Information messages offer a good alternative when you need to provide help on how to fill an input.




Developer documentation