Action button Alert Avatar Bottom sheet Button Card Checkbox Chip Circular button Compact date input Critical banner Date input Date picker Dropdown Instruction Modal Money input Navigation option Nudge Password input When to useBest practiceContentAvailabilityPopover Progress Bar Progress Spinners Promo card Radio Screen loader Search input Section header Segmented control Select Snackbar Summary Switch Tabs Text area Text input Upload Upload input Copy Block Image Ratios Carousel Cards
Design at Wise Foundations Components Action buttonAlertAvatarBottom sheetButtonCardCheckboxChipCircular buttonCompact date inputCritical bannerDate inputDate pickerDropdownInstructionModalMoney inputNavigation optionNudgePassword inputPopoverProgress Bar Progress SpinnersPromo cardRadioScreen loaderSearch inputSection headerSegmented controlSelectSnackbarSummarySwitchTabsText areaText inputUploadUpload inputCopy BlockImage RatiosCarousel CardsPatterns Resources
Password input

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

TBC
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 add a description if you have evidence that users need more context.

Content

Label

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)

A password input with the correct label copy.

A noun that describes the information the user needs to enter, like 'Password'.

A password input with incorrect label copy.

An instruction.

Description (optional)

Description copy should:

  • be a single sentence

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

Placeholders

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

The optional description offers a good alternative when you need to provide help on how to fill an input.

Availability

Platform

Available

Developer documentation

Android

iOS

Web