An input field is a versatile form element that enables users to enter data with built-in validation, conditional visibility, and cross-platform compatibility. Input fields can be customized for different data types and use cases, from simple text entry to specialized formats like email addresses and code snippets.
Input field demonstration

Configuration overview

Configure your input field using these main sections:

Basic Settings

Process data binding, labels, and input types

Data & Validation

Default values, validators, and data formatting

Behavior

Hide/disable conditions and UI actions

Styling

Visual appearance and platform-specific overrides

Basic configuration

Process data key

The process data key establishes the binding between the input element and process data, enabling its later use in:

Core properties

Data configuration

Datasource configuration

Configure the data source and default values for your input field: Default Value: Set the initial value when the field is first displayed
  • Static values for consistent defaults
  • Dynamic values from process data
  • Calculated values from expressions
Default value
Consider the user experience impact of default values - they should help users rather than create confusion.

Validation rules

Ensure data quality with comprehensive validation options:
ValidatorPurposeConfiguration
RequiredEnsures field is not emptyError message customization
Min LengthMinimum character countSpecify minimum number
Max LengthMaximum character countSpecify maximum number
EmailValid email formatWorks with email input type
PatternCustom regex validationDefine regex pattern
Validation example

Behavior configuration

Hide/disable expressions

Define the input field’s behavior using JavaScript expressions to control its visibility or disablement:
  • Hide condition: A JavaScript expression that hides the input field when it evaluates to the specified result.
  • Disabled condition: A JavaScript expression that disables the input field when it returns a truthy value.

Hide expression example

We can use a rule to hide an input field if another field has a null value (it is not filled). For example, the “Mortgage” input field, which remains hidden until users fill in the “Income” field:
Hide expression
Rule used:
${application.input.income} === null || ${application.input.income} === ""
Hide expression
Result:
Hide expression

Disable example

You can use a disabled condition to disable an input element based on values from other fields. When you type ‘TEST’ in the first input (Name) the second input (Test) will be disabled:
Rule used:
${application.input.name} === 'TEST'
Disabled expression
It’s important to make sure that disabled fields have the same expression configured under the path expressions → hide.

UI actions

Configure interactive behaviors for your input field:
EventDescriptionCommon Use Cases
CHANGETriggered when input changesUpdate related fields, trigger calculations, show/hide elements
FOCUSWhen field receives focusLoad dynamic data, show helper content
BLURWhen field loses focusValidate input, save data, format display
UI actions
Action Types Available:
  • Navigate to different pages
  • Execute business rules
  • Call external services
  • Update other form elements
  • Trigger process actions
For detailed UI action configuration, see our UI Actions Guide.

Platform customization

Settings overrides

Customize your input field differently across platforms:
Override Options:
  • Label text for desktop terminology
  • Placeholder text optimized for keyboard input
  • Helper text with extended descriptions
  • Prefix/suffix for web-specific formatting
Web-Specific Features:
  • Keyboard shortcuts integration
  • Advanced formatting options
  • Enhanced validation messages
Platform override import/export
Override settings can be imported and pushed between platforms, saving configuration time and ensuring consistency.

Visual styling

Layout options

Theme customization

Override default styling for complete visual control:

Best practices

Accessibility

  • Provide clear, descriptive labels
  • Use appropriate input types for better mobile experience
  • Ensure sufficient color contrast
  • Include helper text for complex fields
  • Test with screen readers
  • Use semantic HTML attributes

User Experience

  • Choose appropriate input types for the data
  • Provide helpful placeholder text and examples
  • Use validation that guides rather than frustrates
  • Consider progressive disclosure for complex forms
  • Implement auto-save functionality where appropriate
  • Group related inputs logically

Data Management

  • Use meaningful process data keys
  • Plan for data validation early in development
  • Consider data format consistency across platforms
  • Implement proper error handling
  • Document validation rules for maintenance
  • Test with real-world data scenarios

Common use cases

ScenarioInput TypeValidationAdditional Features
Contact FormText, EmailRequired, Email formatClear buttons, helper text
Login FormText, PasswordRequired, Min lengthSecurity indicators
Search FieldTextMin lengthAuto-complete, clear button
OTP codesCodePattern matching
Numeric InputNumberMin/max valuesPrefix/suffix for units
Address EntryTextFormat validationAuto-complete integration