Array Text Input

Tips & examples

An interactive text input box that converts typed string entries into removable chip tags upon pressing Enter. Supports deleting individual tag chips or clearing all tags simultaneously.

When to use

Capturing a collection or list of text strings (e.g., tags, keywords, email lists, categories) within a single interactive input field.
Allowing users to type text strings, commit them as chip/tag tokens via the Enter key, and manage them individually (single deletion) or collectively (bulk clear).
Binding array-of-strings schema properties to form data models.

What you need

Disabled by default until a default_form is present on the page layout. Requires selecting a valid Form Element ID and a Field Path targeting an array property (e.g. [’tags’]).

Form-bound array-of-strings schema properties (e.g. string[]), list attributes, or keyword tag collections.
Data Source section attributes remain locked until a default_form is actively placed in the workspace layout hierarchy.

Examples

A tag input field bound to a blog post creation form (['tags']) where authors type keyword tokens and press Enter to commit them.
An email recipient list input where multiple email addresses are entered as discrete string chips.

Avoid

Using for single scalar string inputs (e.g. First Name, Street Address) — use the standard text_input component instead.
Attempting to configure form data bindings before placing a parent default_form element on the page canvas layout.
Attempting to set Default Value static strings while an active Data Source form-binding is connected.

Use instead

Text Input — The form property expects a single scalar string value rather than an array of multiple text strings.

Pairs well with

Form — Provides the underlying form context, validation handling, and string array payload submission engine.

Properties

Editor properties

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.

Data Source

Element IDrequiredNumber or TextInside `dataSource`: Another element on the page whose data backs this field.
Default: none
Field PathrequiredList of Text or NumberInside `dataSource`: Path into the source element’s data (property segments).
Default: none

Input

Default ValueoptionalNot set (null): Initial array of string values loaded into local state when no Data Source is connected. Automatically disabled when Data Source form-binding is active.
Example ['keyword1', 'keyword2']
Default: none
DisabledoptionalYes / no or Custom expression (yes/no): When true, the control cannot be edited.
Example false
Default: none
NullableoptionalYes / no or Custom expression (yes/no): Whether the field may be left empty.
Example false
Default: none

Sizing

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

Translatable labels

label — The visible text string displayed directly above the array text input field.

Accessibility

Renders an accessible tag creation field with ARIA multi-selectable listbox/token patterns. Screen readers announce committed chips and individual delete button actions.

Enter key commits current text string into a tag token.
Backspace key on an empty input deletes the preceding tag chip.
Tab navigates to individual tag removal icons.

Expressions

Values you can read in expressions

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

elements.myArrayTextInput.<property>

value Array<string> Current input value of this control. elements.myArrayTextInput.value.length

When The list of entered strings. Read `.length` to show a count, or pass the whole list to a query parameter that accepts several values.

disabled boolean True while the control is locked and cannot be edited. elements.myArrayTextInput.disabled

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.myArrayTextInput.value

Replace myArrayTextInput 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.

Composition

Where you can place it

Drag this element into one of these containers:

Placement notes

Form — Can be nested directly inside or placed alongside form layouts. When connected to a form Data Source, local Default Value inputs are disabled as the value is managed directly by the form state.

Sample configuration

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
{
  "config": {
    "dataSource": {
      "elementId": "myElement",
      "fieldPath": [
        "fieldPath"
      ]
    },
    "defaultValue": [
      "defaultValue"
    ],
    "disabled": false,
    "nullable": false
  }
}

Ready-made setups

Form-Bound Keyword Tag Array Input ↕

Configures a form-bound array text input mapping to a tags field (['tags']), enabling chip creation on Enter and individual tag removal.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
{
  "config": {
    "dataSource": {
      "elementId": "articleCreationForm",
      "fieldPath": [
        "tags"
      ]
    },
    "translation": {
      "label": "Article Keywords"
    },
    "input": {
      "disabled": "@@expression: false",
      "nullable": false
    }
  }
}