Skip to content

Latest commit

 

History

History
73 lines (40 loc) · 2.68 KB

design-patterns-controls-CopyableLabel.md

File metadata and controls

73 lines (40 loc) · 2.68 KB

CopyableLabel

Basics

The CopyableLabel control enables a multi-line text area where the user can view/enter text and provides an easy way for the user to copy the value of the text area.

When to use

Text input controls let the user enter text and offer optional validation of that text. 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

Do

  • Use the CopyableLabel to enable the user to easily copy text values.
  • Set the infoBalloonContent to concise, helpful text with a link to learn

Don't

  • Don't use the CopyableLabel if the field value requires validation, consider the MultilineTextBox instead
  • Don't use the CopyableLabel if copying the text field value is not needed, consider the MultilineTextBox instead

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