Text component icon Text

The Text component is the most common element on every form: a simple text field. It is intended to capture short text elements such as the name of a person. It is possible to validate and restrict the component to only accept certain values.

For longer text, consider using the Multiline text component. For numbers, there are two components: Number and Decimal.

Appearance

Design Rendered
Text component rendered
Text component design

Attributes

Group Name Description

General

ID

This is a unique id for the component.

Label

The label attribute adds a label to the component, if not empty.

Label position

The position of the label, you can choose between Left or Top.

Label tooltip

When it is defined, a question mark icon appears in the component label. When the user hovers over it, it shows this text in a tooltip.

Value

The binding for the component. Use an appropriate expression to bind the component to its value and thus specify where the value is saved read. For example, use {{myVariableName}} to store the value of the component in a variable named myVariableName. Use prefixes to define the scope of the value, e.g., root. for referencing the root case to store the value in or parent. to store the value in the parent work item of the current one. For instance {{root.foo}} stores the value in the root case using a variable named foo. For more information please refer to the Flowable Forms section.

Default value

If a value is not set, the default value is used. Use an appropriate value; e.g., a text, a number, an id or a comma-separated list.

Description

The description attribute additionally adds a description to the component.

Visible

Boolean value or expression specifies whether the component is visible or hidden. This expression might include another value in the same form, for instance, use a checkbox bound to {{showAdditionalFields}} and use the very same expression as the visible attribute to show or hide the component according to the checked state of the checkbox. If you want only to show the component, if the form is not used as the init-form, you can use the expression {{root.id}} which evaluates to true only, if there is a current id which is not the id in a start form.

Ignored

If true the component is hidden and the value is not part of the payload.

Enabled

A Boolean value or expression specifies whether component is enabled or disabled.

Placeholder

The text that appears in the widget when there is no value.

Validation

Required

The required flag specifies whether entering a value for the component is mandatory or not.

Minimum length

Specifies the minimum length of the text. By default, there is no minimum length.

Maximum length

Specifies the maximum length of the text. By default, there is no maximum length.

Validation regex

It allows you to specify a regular expression (RegEx) with which to validate the text. This enables you to create powerful validations. A regular expression essentially defines a pattern which your text must follow. There are many tutorials and validators online where you can practice regular expressions.

Example: ABC\d{5}

This RegEx would accept the value ABC12345 and would reject 12345 or EFG98765.

Example: [1-9][0-9]{3}

This pattern would accept the values 1000, 1002 or 9999 but would reject 0001 or A200.

Validation mask

With a validation mask, you can define a simple pattern of letters and numbers which the input value must follow. This is especially useful if the user has to enter something like a reference number which always follows the same pattern. See above for a full reference of the mask patterns.

Example: AAA-999

This pattern would accept the value ABC-111 and would reject 999-ABC or AAA-99.

Example: 9999.99$

This pattern would accept the values 1001.01$ and 0000.00$ but would reject 100.99$.

Error messages

Minimum length

Specifies the message shown if the defined minimum length is not reached.

Maximum length

Specifies the message shown if the defined maximum length is exceeded.

Validation regex

Specifies the error message shown if the value does not match the regular expression validation pattern.

Validation mask

Specifies the error message shown if the value does not match the validation mask pattern.

Documentation

Documentation

Documentation intended to explain concepts of its use for future reference.

Customization

Style class

Stylesheet class name. Add any style classes to be applied to the component for the desired styling and rendering.