Text Input Block - Flex Forms

The Text input block collects single-line answers: titles, codes, and free text. Prefer the Name block for first/last name composites.

Business Use Cases

Identity Capture

The standard input for collecting First Names, Last Names, and Company Titles.

Structured Codes

Use Custom Masking to force users to correctly type License Plates, Coupon Codes, or Serial Numbers.

Social Links

Use URL prefixes to guarantee users submit clean links to their LinkedIn or Twitter profiles.

Configuration & Usage

Deploy to Canvas

Drag the Short Text block from the Component Catalog onto your canvas.

Configure the Inspector

Set the Label and Placeholder. Use the Inspector to activate advanced visual modes like the Emoji Picker or Speech Dictation.

Apply a Mask (Optional)

If you need specific data (like a postal code or license plate), select a Mask Preset to format the user’s input automatically as they type.

Technical Configuration Schemas

Unlock the full power of the short text block with these Inspector configurations.

Visuals & UI
Behavioral Features
Validation Rules

string

default:"md"

The visual size of the input field. Options: sm, md, lg.

string

default:"primary"

The UI variant styling applied to the input field.

string

The name of a Heroicon to display at the beginning of the input field.

string

A static string prepended to the input (e.g., https://).

string

A static string appended to the input (e.g., .com).

boolean

default:"false"

Enables a microphone icon inside the input, allowing users to dictate their answer using native speech-to-text.

string

The locale code for speech dictation (e.g., en-US or pl-PL).

boolean

default:"false"

Adds a native emoji picker button directly inside the text input.

string

Applies an automatic formatting mask as the user types. Available presets: date, time, phone, card, postal, custom.

string

If mask_preset is set to custom, this string defines the exact mask pattern (e.g., 99-999).

Data Payload Architecture

Because the Short Text block collects simple strings, the resulting JSON payload is straightforward, but it automatically trims leading and trailing whitespace.

{
  "submission_id": "sub_404",
  "data": {
    "first_name": "Alexander",
    "custom_license_plate": "WJ-4921"
  }
}

[
    'first_name' => 'Alexander',
    'custom_license_plate' => 'WJ-4921',
]

Deep Dive: Input Masking

Input masking solves the problem of messy data. If you ask for a license plate number without a mask, you might get ABC 1234, abc1234, or ABC-1234. By applying a Custom Mask (e.g., AAA-9999), the field physically prevents the user from typing anything else and automatically inserts the hyphen, ensuring your database remains perfectly clean.

Masks vs. Validation: A mask controls how the user types, but it does not validate the underlying logic. For example, a date mask 99/99/9999 will accept 99/99/9999, which is not a real date. Use the Date & Time Block for genuine date collection.

Best Practices & FAQs

When to use Speech Dictation

Enable dictation when you expect users to fill out the form on mobile devices while on the go (e.g., field workers submitting inspection reports). It drastically reduces typing friction.

Using Prefixes for URLs

If you want a user to submit their website, use the Prefix feature to lock in https://. This prevents them from typing www. or http://, standardizing your data output so you don’t have to clean it up later.

​Business Use Cases

Identity Capture

Structured Codes

Social Links

​Configuration & Usage

​Technical Configuration Schemas

​Data Payload Architecture

​Deep Dive: Input Masking

​Best Practices & FAQs

Business Use Cases

Configuration & Usage

Technical Configuration Schemas

Data Payload Architecture

Deep Dive: Input Masking

Best Practices & FAQs