Text Fields
This article will cover the design and behavior configurations of Descope text fields within flow screens. This guide
details how text fields within Descope work and enhanced use cases for using items such as links, dynamic keys, etc,
within text fields. Generally, text fields are added by dragging the Text component from the left panel into a screen
of your Descope flow.
Design
Descope's text fields have extensive design configurations that can be divided into categories: Content, Alignment and Direction, and Style.
Content
The content of text fields is what is displayed to the end user when they progress through the Descope flow. This
content can vary based on what you would like to display to the user. You can utilize general text like Welcome, please sign up or extend to use cases with links or dynamic keys.
The content area allows you to use keyboard shortcuts or select text modifiers for bold, italicized, etc., and embed links. You can combine these items within the same text field and split the text into multiple paragraphs by spacing the lines accordingly.
Dynamic Values
You can also enhance your flow screens by using dynamic keys within the text fields to display data about the user or previously submitted form data. Our dynamic key guide explains what keys are available, but below is an example of how to utilize dynamic keys with auto-population when starting the double curly braces.
Alignment and Direction
Text fields can be configured to have alignment and direction. These configurations allow you to position the elements and also use RTL (right-to-left) for various languages. For detailed configuration and explanation of alignments and direction, see the main screen guide.
Style
Like other screen components, you can configure the style of the text fields. The Style and Color are available
to be configured for text fields. The Style pairs the configured typography within the styling
for the project, and the Color pairs with the configured color schemes for the text components of the styling components.
Then the Fill Container option will stretch the component to fill the parent container with the element.
Behavior
You will find the Hide when empty configuration within the behavior tab for text fields. Essentially, this allows
you to configure whether the screen will exclude the space taken by the text field if it's empty. For example, if you
do not submit data in a form and it uses the form field, the space will not be taken up within the screen.
Here is an example of the spacing when this configuration is enabled and the value is not empty.
Here is an example of the spacing when this configuration is enabled and the value is empty.
