Application Builder - Data Input element

The Data Input element is the standard text field for your application. Whether you are building a contact form, a search bar, or a login screen, this element handles the user entry. It supports various input types and validation logic.

This guide covers how to collect text, emails, passwords, or multiline descriptions from your users.

Overview

The Data Input element allows users to enter textual information. This is important for collecting various data types, including names, email addresses, URLs, and phone numbers. Text inputs are commonly used together with the form element to create user input forms.

  • Versatility: Can be configured as a single-line text field, a password field, an email field, or a multi-line text area.
  • Validation: Built-in options to mark fields as “Required” or enforce formats (like Email).
  • Dynamic Pre-fill: You can bind the default value to a Data Source to pre-fill the input (e.g., “Edit Profile”).
  • Styling: Visual properties for both the Label and the Input Box are managed via Theme Overrides.

single-line input field

Add a data input

  1. Open the Elements panel (click the + icon).
  2. Select Data Input.
  3. Drag and drop the element onto your canvas (typically inside a Form Container if used for submission).

Configuration

Click the element to open the General properties tab.

1. Content & Logic

  • Label: The descriptive text displayed above the field (e.g., “Email Address”).
  • Placeholder: Grey hint text shown inside the box when empty (e.g., “Enter your email…”).
  • Value: Text that appears automatically when the page loads.
    • Dynamic: Click the Connect Data icon to bind this to a Data Source. This is perfect for “Edit” forms where you want to show the existing data first.

2. Input Type

Define how the browser should treat the data.

  • Text: Standard alphanumeric input.
  • Password: Masks the characters for security.

Passwords are sensitive data. Please be careful how you handle and store passwords in your application.

3. Behavior & Validation

  • Required: If checked, the user cannot submit the form (or trigger a linked action) without filling this field.
  • Multiline: Switches the element from a single-line bar to a taller text box (Text Area).
    • Rows: If Multiline is checked, you can define the default height (number of rows).
  • Email: Validates for @ symbol and domain. Adds mobile keyboard support for emails.

Even if you limit the number of displayed lines, users can still enter more text than what’s visible. The scrollbar functionality will allow them to scroll and view/edit the entire content.

Users can type or paste text within the text area, and they can navigate and edit the text using keyboard shortcuts and mouse clicks.

Add and configure table elements

Styling and Theme Overrides

By default, the input inherits the styles from your Global Theme. To customize a specific input (e.g., to make a “Danger” input red), use Theme Overrides.

  1. In the General tab, look for the Style/Settings icon (slider icon) next to the Label or Input sections.
  2. Clicking this opens the specific styling menu for that part of the element.

Styling the Label

  • Typography: Font family, weight, size, and color.
  • Alignment: Left, Center, or Right align the label text.

Styling the Input Box

  • Text: Font size and color of the text inside the box.
  • Background: Fill color of the input field.
  • Border: Color, width, and radius (rounding) of the box edges.
  • Padding: Spacing inside the box.

Data input - Styling and Theme Overrides

Frequently asked questions (FAQ)

Can I save the input data?

Yes. To save data, you usually place the Data Input inside a Form Container or use a Button with a “Create/Update Row” action. In the action settings, you map the Input’s value to a specific database column.

How do I limit the character count?

Currently, there is no strict “Max Length” setting in the frontend element.

Related content

Still need help? If you’re looking for something else, please feel free to make recommendations or ask us questions; we’re ready to assist you.