Input

An input field is a form element that enables users to input data with validations and can be hidden or disabled.

Configuring the input element

Input settings

The Input Field offers the following configuration options:

• General
• Properties
• Datasource
• Validators
• Expressions
• UI actions
• Input styling

General

• Process data key - creates the binding between form element and process data, so it can be later used in decisions, business rules or integrations

Properties

• Label - the label that appears on the input field
• Placeholder - the placeholder text that appears in the input field when it is empty
• Type - the type of data that the input field can accept, such as text, number, email, or password
• Prefix - a label that appears as a prefix to the input field
• Suffix - a label that appears as a suffix to the input field
• Has clear -
• Helpertext - additional information about the input field (can be hidden inside an infopoint)

Datasource

The default value for the element can be configured here, this will autofill the input field when you will run the process.

Computed datasource value

To add a computed value, you have to explicitly check “Computed value” option (represented by the f(x) icon), which will transform the desired field into a JavaScript editor.

Check the following example:

»Computed values

Validators

There are multiple validators can be added to an input (more details here).

Expressions

The input field's behavior can be defined using JavaScript expressions for hiding or disabling the element. The following properties can be configured for expressions:

• Hide - JavaScript expression used to hide the Input Field when it returns a truthy value
• Disabled - JavaScript expression used to disable the Input Field when it returns a truthy value

info

It's important to make sure that disabled fields have the same expression configured under the path expressions → hide.

UI actions

UI actions can be added to the Input Field to define its behavior and interactions.

• Event - possible value: CHANGE
• Action Type - select the action type

info

For more details on how to configure a UI action, click here.

Input styling

Icons

• Icon Key - the key associated in the Media library, select the icon from the Media Library
• Icon Color - select the color of the icon using the color picker

info

When setting the color, the entire icon is filled with that color, the SVG's fill. Avoid changing colors for multicolor icons.

You have the option to enhance the Input element by incorporating two types of icons:

• Left Icon: You can include an icon on the left side of the Input element. This icon can serve as a visual cue or symbol associated with the input field's purpose or content.
• Right Icon: Same as left icon.

By utilizing these two types of icons, you can provide users with a more intuitive and visually appealing experience when interacting with the Input element.

Typography

You can customize the typography for the following properties:

• Label
• Text
• Helper & errors

For more details on how to upload and manage fonts, check the following section:

»Font management

The Input Field can be styled using valid CSS properties (more details here)