Text Input

An interactive single-line or multiline text entry box featuring optional start/end adornments (icons/text), a helper text tooltip ‘?’ button, and direct form validation state indicators.

• Capturing standard short or multiline text entries (e.g. names, notes, addresses) inside forms.
• Binding form fields to backend schema paths to handle automatic validation errors, touch states, and value change tracking.
• Providing text inputs with regex validation patterns, helper tooltips, or prefix/suffix adornments.

Requires a valid Data Source object containing an elementId (matching the target Form ID) and a fieldPath array mapping to a specific field name. The target Form must have view fields available.

• Form-bound text fields, single string schema attributes, or multiline text properties.

• Data Source section attributes remain locked until at least one default_form exists on the page. Auto-suggests the nearest parent form if nested inside one.

• A standard ‘First Name’ input bound to a parent user profile form field (['firstName']).
• A multiline ‘Comments’ box configured with 4 visible lines and a helper tooltip explaining character limits.
• A postal code text input with a custom Regex Pattern enforcing valid local postal code formats.

• Using for long-form prose requiring rich toolbar controls (bold, headers, links) — use the markdown_input component instead.
• Configuring a static Default Value or custom Regex Pattern while Data Source form-binding is active, as form context overrides local defaults and clears regex pattern editors.
• Attempting to add a Data Source binding when no parent or sibling default_form exists on the page canvas.

Use instead

• Markdown Input — The user needs a rich text editor toolbar with markdown formatting capabilities.
• Number Input — The entry requires numeric mask formatting, decimal precision, or number incrementing controls.

Pairs well with

• Form — Provides form context, validation handling, touched states, and write-back change handlers.

Configure these in the Application Designer property panel. Group headings mirror the editor where possible. Data Source is where the element gets its rows or field binding (a view/query, a connector operation, or a parent form field). References appear only for view-backed sources and map foreign-key ID columns to readable labels from another view.

• No size of its own: dropped at the platform default of 1 × 1 grid cells and resized on the page.

• label — Visible text label positioned directly above the input box.
• helperText — Tooltip content shown when hovering over the ‘?’ helper button.

Renders standard semantic input (<input type='text'> or <textarea>). ARIA attributes convey validation error states, label linkage (aria-labelledby), and helper tooltip content (aria-describedby).

• Tab moves focus into and out of the text entry field.
• Standard text navigation and editing keyboard shortcuts apply.

Other parts of your app can read live values from this element in custom expressions:

To use one of these, open the property you want to drive on the other element, switch it to expression mode in the Expression Editor, and enter:

1

elements.myTextInput.value

Replace myTextInput with this element’s unique id. Select the element in Application Designer and copy the id chip at the top of the right-hand property panel.

Drag this element into one of these containers:

• Conditional Container
• Form
• List
• Modal Dialog
• Table
• Tabs

• Form — Automatically detects and auto-suggests nearest parent default_form container. When connected, local Default Value becomes disabled and Regex Pattern editor is hidden/cleared.