Skip to content

Latest commit

 

History

History
77 lines (43 loc) · 2.8 KB

design-patterns-controls-PasswordBox.md

File metadata and controls

77 lines (43 loc) · 2.8 KB

PasswordBox

Basics

The PasswordBox control enables the user to input text that is not echoed back to the screen. Use the PasswordBox for security sensitive fields.

When to use

Gathering text input is available via multiple controls, choose the one most suited to your needs

  • CopyableLabel - multi-line text input with built-in support for infoBalloonContent and an easy way for user to copy value.
  • NumericTextBox - restricts input to numbers only and built-in support for validations, infoBalloonContent and placeHolderText
  • PasswordBox - text input that uses a * character instead of echoing user input with built-in support for validations, infoBalloonContent and placeHolderText. Use PasswordBox for security sensitive fields.
  • TextBox - single-line text input with built-in support for validations, infoBalloonContent and placeHolderText
  • MultilineTextBox - multi-line text input with built-in support for validations, infoBalloonContent and placeHolderText

Best practices

Use the PasswordBox for security sensitive fields like passwords.

Do

  • Set the infoBalloonContent to concise, helpful text with a link to learn
  • Use placeHolderText for examples of field values
  • Use the validations option to help the user input the correct text if a specific format is required
  • Use the label option to provide a helpful name for the control.
  • When part of a form, provide clear designations for which fields are required vs. optional.

Don't

  • Don't use the PasswordBox if the user needs to see the characters they are entering.

Developer tips and tricks

  • To display HTML in the infoBalloonContent use this code

infoBalloonContent: { htmlTemplate:"Sample label
infoBalloonContent should explain concepts and
can include a link to learn more.Learn more about infoBalloon", viewModel: {}, }

Interactive control and sample source code

Go to the playground site to use the latest control and get source code for your project. Learn more about playground.

Related info