Input field

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.

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

Label

Purpose: The visible text displayed above or alongside the input fieldFeatures:

Supports full Markdown syntax for rich formatting
Can include links, emphasis, and other Markdown elements
Responsive across all platforms

Use Markdown to enhance your labels with bold, italic, or linked text.

Input Types

Choose the appropriate input type for your data:

Type	Description	Validation Features	Best Used For
Text	General text input	Length, pattern matching	Names, titles, descriptions
Number	Numeric values only	Min/max values, decimals	Quantities, prices, scores
Email	Email address format	Built-in email validation	Contact information
Password	Masked text input	Strength requirements	Authentication, security
Code	Digits-only input	Only digits allowed	OTP codes, PIN numbers, postal codes, verification codes

The Code input type accepts only digit characters during input and stores the value as a string (not as a number). This is ideal for numeric codes that should be treated as text, such as OTP codes, PIN numbers, postal codes, or verification codes where leading zeros or string formatting is important.

Use Code instead of Number when you need numeric-only input but want to preserve the value as a string in your data model. This is particularly useful for cases where:

Leading zeros must be preserved (e.g., “001234”)
The value is an identifier rather than a mathematical number
You need string operations on numeric values

Code Type Technical Details:

Input behavior: Only allows digits (0-9) to be typed
Data storage: Saves the value as a string data type
Data model support: String data model types only
Value formatting: No automatic formatting is applied to the displayed value
Common use cases: OTP validation, PIN entry, postal codes, verification codes

{
  "inputType": "code",
  "label": "Enter verification code",
  "placeholder": "000000"
}

Placeholder Text

Purpose: Provide hints or examples of expected inputBest Practices:

Keep it concise and helpful
Show format examples (e.g., “john@example.com”)
Avoid using placeholder as primary label
Consider accessibility for screen readers

Prefix & Suffix

Prefix: Text or symbols appearing before the input

Currency symbols ($, €, £)
Protocol indicators (https://, @)
Unit prefixes

Suffix: Text or symbols appearing after the input

Units of measurement (kg, cm, %)
Domain extensions (.com, .org)
Contextual indicators

Examples:

$ [input field] USD    // Prefix: $, Suffix: USD
@ [input field]        // Prefix: @
[input field] %        // Suffix: %

Additional Features

Has Clear: Adds an ✕ button to quickly clear the input content

Improves user experience on mobile devices
Useful for search fields and optional inputs

Helper Text: Additional context or instructions

Can be displayed as regular text below the field
Can be hidden within an expandable info point
Supports Markdown formatting

Update on Blur: Controls when data is saved

Triggers validation when user leaves the field
Optimizes performance by reducing frequent updates

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

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:

Basic Validators
Numeric Validators
Date Validators
Custom Validators

Validator	Purpose	Configuration
Required	Ensures field is not empty	Error message customization
Min Length	Minimum character count	Specify minimum number
Max Length	Maximum character count	Specify maximum number
Email	Valid email format	Works with email input type
Pattern	Custom regex validation	Define regex pattern

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:

Rule used:

${application.input.income} === null || ${application.input.income} === ""

Result:

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'

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:

Event	Description	Common Use Cases
CHANGE	Triggered when input changes	Update related fields, trigger calculations, show/hide elements
FOCUS	When field receives focus	Load dynamic data, show helper content
BLUR	When field loses focus	Validate input, save data, format display

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:

Web Applications
Mobile Apps

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

Override settings can be imported and pushed between platforms, saving configuration time and ensuring consistency.

Visual styling

Layout options

Web Styling
iOS Styling
Android Styling

Icon Integration

Left Icon: Visual cue at the start of the input

Search icons for search fields
User icons for name fields
Lock icons for password fields

Right Icon: Action or status indicator

Clear buttons (×)
Validation status (✓ or ⚠)
Dropdown arrows

Icon Configuration:

Select from Media Library
Custom icon keys
Platform-specific icons

Responsive Sizing

Option	Behavior	Best For
Fill	Expands to use available space	Full-width forms
Fixed	Maintains specified width	Consistent layouts
Auto	Adjusts based on content	Dynamic forms

Theme customization

Override default styling for complete visual control:

Input Field Styling

Border & Background:

Border colors for different states
Background color customization
Border radius and thickness

Text Styling:

Font family and size
Text color for different states
Placeholder text styling

States:

Default, focused, disabled, error states
Hover effects for web
Touch feedback for mobile

Label & Helper Styling

Label Customization:

Typography controls
Color options
Positioning and alignment

Helper Text:

Font styling
Color coordination
Tooltip appearance

Validation Styling

Error States:

Error message styling
Input border color changes
Icon integration

Success States:

Success indicators
Positive feedback styling
Completion animations

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

Scenario	Input Type	Validation	Additional Features
Contact Form	Text, Email	Required, Email format	Clear buttons, helper text
Login Form	Text, Password	Required, Min length	Security indicators
Search Field	Text	Min length	Auto-complete, clear button
OTP codes	Code	Pattern matching
Numeric Input	Number	Min/max values	Prefix/suffix for units
Address Entry	Text	Format validation	Auto-complete integration

Getting Started

Platform overview

FlowX.AI Designer

Building projects

Building blocks

Platform deep dive

API reference

Input field

Configuration overview

Basic Settings

Data & Validation

Behavior

Styling

Basic configuration

Process data key

Core properties

Data configuration

Datasource configuration

Validation rules

Behavior configuration

Hide/disable expressions

Hide expression example

Disable example

UI actions

Platform customization

Settings overrides

Visual styling

Layout options

Theme customization

Best practices

Accessibility

User Experience

Data Management

Common use cases

Getting Started

Platform overview

FlowX.AI Designer

Building projects

Building blocks

Platform deep dive

API reference

​Configuration overview

Basic Settings

Data & Validation

Behavior

Styling

​Basic configuration

​Process data key

​Core properties

​Data configuration

​Datasource configuration

​Validation rules

​Behavior configuration

​Hide/disable expressions

​Hide expression example

​Disable example

​UI actions

​Platform customization

​Settings overrides

​Visual styling

​Layout options

​Theme customization

​Best practices

Accessibility

User Experience

Data Management

​Common use cases

Configuration overview

Basic configuration

Process data key

Core properties

Data configuration

Datasource configuration

Validation rules

Behavior configuration

Hide/disable expressions

Hide expression example

Disable example

UI actions

Platform customization

Settings overrides

Visual styling

Layout options

Theme customization

Best practices

Common use cases