Skip to main content

Adding text to controls

Pega Community logo

Note: The following content, referenced from Pega Community, is included here to help you better achieve the module learning objectives.

Applicable to Theme Cosmos applications

Ensure that users fill in the forms in an application correctly by supplying brief instructions. By using labels, helper text, and placeholders, you define what kind of input goes into each control, which reduces time required to fill in the form.

For example, a helper text might clarify differences in available options depending on the context:

Sample helper text
An example of a helper text that gives context to the options in the drop-down
                    list
An example of a helper text that gives context to the options in the drop-down
                    list

You can define helper text for editable input fields, such as text areas or check boxes. Helper text does not appear above fields that are in a read-only view or are not used for inputting data, such as paragraphs.

Text prompts are also important for accessibility, because they provide users who rely on assistive technologies with screen-reader-friendly guidance.

Note the following accessibility best practices:

  • Use only one method to label a field. For example, do not duplicate the content of the label in helper text.
  • Ensure that the label is programmatically associated with the field. This way, when screen reader user focuses on the field, the software reads the label.
  • Ensure that labels are above input fields.
  • Use simple, clear language that is descriptive and does not include technical jargon.
  1. Open the view that you want to edit.
    For more information, see Accessing views in your application.
  2. In the configuration pane on the right side of the window, hover over the control, and then click the Edit icon.
  3. On the General tab, define the label for the control:
    • To keep the name of the property from which the control is sourced as the label, select the Use property default check box.
    • To use a custom label, clear the Use property default check box, and then enter a new label.
  4. In the Placeholder list, specify the text that appears in the control when it has no value assigned:
    • To keep the placeholder space empty, select None.
    • To add placeholder text, select Other, and then select the text that you want to use.
    • To add a placeholder that represents the format of the date used in a Date Time control, select Expected Format.
  5. In the Helper text list, specify the additional text that appears in the control:
    • To keep the helper text space empty, select None.
    • To add inline helper text, select Always visible/in-line, and then define the helper text value.
    • To add a help icon that displays text on hover, select Help icon with overlay on hover, and then enter the helper text.
    • To add a tooltip, select Tooltip (not recommended), and then define the helper text value.
    Because tooltips are visible only on hover, they are not suitable for users who rely on accessibility features.
  6. Click Apply.
What to do next: Discover more about how accessibility is part of application architecture in the following article:
If you are having problems with your training, please review the Pega Academy Support FAQs.

Did you find this content helpful?

Want to help us improve this content?

We'd prefer it if you saw us at our best.

Pega Academy has detected you are using a browser which may prevent you from experiencing the site as intended. To improve your experience, please update your browser.

Close Deprecation Notice