Input Components
Input components collect user data. Values are exposed as read-only outputs for binding to variables, other components, or database writes.
This reference lists definition, custom configuration, data configuration, action configuration, and limitations per component. Shared Design fields: Design Panel.
Components Overview
Unlike display components, input components output values:
| Component | Clients | Data tab | Action | Output |
|---|---|---|---|---|
| Text Input | Web, Native App | — | ✓ | text / integer / decimal — current input |
| Number Input | Web, Native App | — | ✓ | integer — current number |
| Data Selector | Web, Native App | ✓ | ✓ | object — selected row |
| Date/Time Picker | Web, Native App | — | ✓ | date / time (with timezone) |
| Rich Text Editor | Web only | — | ✓ | text (HTML) |
| Image Picker | Web, Native App | — | ✓ | image / image[]; also id, url as text |
| Video Picker | Web, Native App | — | ✓ | video; also id, url as text |
| Custom Selector | Web, Native App | ✓ | ✓ | object / object[] — selected item(s) |
| Switch | Web, Native App | — | ✓ | boolean |
Text Input
Definition
Single- or multi-line input for text, integers, or decimals.
Custom configuration
| Property | Type | Default / options | Clients & conditions | Description |
|---|---|---|---|---|
| Placeholder | text | empty | All | Hint when empty; bindable. Default value takes precedence over placeholder. |
| Value type | enum | Text / Integer / Decimal | All | Input format; changing type resets default. |
| Default value | text / integer / decimal | empty | All | Initial value; bindable; cannot bind self. |
| Password | boolean | false | All | Mask input. |
| Autofocus | boolean | false | All | Focus and open keyboard on load. |
| Multiline | boolean | false | All | Multi-line text. If width is fit-content, min height may not apply. |
| Debounce (ms) | integer | 0 | All | Delay before On value change after typing. |
Action configuration
Triggers: On value change, On blur. See Trigger List.
Number Input
Definition
Numeric input with + / − steppers.
Custom configuration
| Property | Type | Default / options | Clients & conditions | Description |
|---|---|---|---|---|
| Max | integer | unlimited | All | Upper bound; values clamp on input or step. Bindable. |
| Min | integer | unlimited | All | Lower bound; values clamp on input or step. Bindable. |
| Step | integer | 1 | All | Increment for +/−. Manual typing ignores step. |
| Default value | integer | 0 | All | Initial value; bindable. |
| Disable steppers | boolean | false | All | Gray out +/−; keyboard input only. |
| Disable typing | boolean | false | All | Stepper-only input. |
Action configuration
Triggers: On value change. See Trigger List.
Data Selector
Definition
Dropdown bound to structured option data matching the data source type.
Custom configuration
| Property | Type | Default / options | Clients & conditions | Description |
|---|---|---|---|---|
| Placeholder | text | empty | All | Shown when nothing selected; bindable; style configurable. |
| Allow clear | boolean | false | All | Show clear (×) icon to reset selection. |
Data configuration
Configured on the component’s Data tab.
| Property | Type | Default / options | Description |
|---|---|---|---|
| Data source | array | empty | Table query, API, or bound array; filter, sort, dedupe. |
| Display field | text | empty | Field shown in the list (e.g. name). |
| Default value | same as display field | empty | Initial selection; type must match display field. |
When the source is a table, configure filter, sort, and dedupe below the source.
Action configuration
Triggers: On value change. See Trigger List.
Date/Time Picker
Definition
Calendar or time wheel for picking dates or times.
Custom configuration
| Property | Type | Default / options | Clients & conditions | Description |
|---|---|---|---|---|
| Mode | enum | Date / Time | All | Date calendar vs. time picker. |
| Start | date / time (with timezone) | unlimited | All | Minimum selectable; earlier disabled. Bindable. |
| End | date / time (with timezone) | unlimited | All | Maximum selectable; later disabled. Bindable. |
| Minute step | integer | 1 / 5 / 10 / 15 / 30 / 60 | Web, time mode | Minute list increment. |
| Placeholder | text | empty | All | Shown when empty. |
| Default value | date / time (with timezone) | empty | All | Initial value; bindable. |
Action configuration
Triggers: On value change. See Trigger List.
Rich Text Editor
Definition
Web-only WYSIWYG editor for formatted content.
Custom configuration
| Property | Type | Default / options | Clients & conditions | Description |
|---|---|---|---|---|
| Content | text (HTML) | empty | Web only | Initial HTML; supports bindings inside content. |
Action configuration
Triggers: On value change. See Trigger List.
Image Picker
Definition
Upload one or many images from gallery, camera, or files.
Custom configuration
| Property | Type | Default / options | Clients & conditions | Description |
|---|---|---|---|---|
| Max count | integer | 1–99 | All | Max images; > 1 enables multi mode and array default. |
| Columns | integer | empty | max count > 1 | Grid columns per row. |
| Row gap | integer (px) | empty | max count > 1 | Vertical spacing between thumbnails. |
| Column gap | integer (px) | empty | columns > 1 | Horizontal spacing. |
| Placeholder image | text (image URL) | empty | All | Placeholder before upload; bindable. |
| Default images | image / image[] | empty | All | Pre-filled image(s). |
| Max file size (MB) | integer | empty | All | Per-file upload limit. |
| Enable preview | boolean | true | All | Tap thumbnail for fullscreen preview. |
| Show loading | boolean | true | All | Loading indicator while uploading. |
Action configuration
Triggers: On success. See Trigger List.
Batch insert to database: In an Add action, enable Batch insert and bind the data source to the image picker output.
Video Picker
Definition
Select and upload a video from gallery or files.
Custom configuration
| Property | Type | Default / options | Clients & conditions | Description |
|---|---|---|---|---|
| Default value | video | empty | All | Initial video. |
| Max size (MB) | integer | empty | All | Upload size cap. |
| Disable preview | boolean | false | All | Hide in-card preview after selection. |
| Show loading | boolean | true | All | Progress/loading during upload. |
Action configuration
Triggers: On success. See Trigger List.
Custom Selector
Definition
Option cards with Selected and Unselected sub-canvases; horizontal or vertical; single or multi select. Used for custom forms, quizzes, and tabs.
Custom configuration
| Property | Type | Default / options | Clients & conditions | Description |
|---|---|---|---|---|
| Wrap options | boolean | false | All | Wrap to next row when horizontal overflow. |
| Multi-select | boolean | false | All | Multiple selections; toggling resets default. |
| Allow deselect | boolean | false | All | Tap selected item to clear selection. |
| Empty means all | boolean | false | Multi-select only | When nothing selected, output is all options. |
| Keep selection on refresh | boolean | false | All | Preserve selection when data refreshes. |
| Preserve child state | boolean | false | All | Keep hidden option sub-form values in memory. |
Data configuration
On the component’s Data tab.
| Property | Type | Default / options | Description |
|---|---|---|---|
| Data source | array | empty | Table query/subscription, API, or page/parent array. |
| Default match field | text | empty | Field used to match default selection. |
| Default value | same type / array | empty | Initial selection(s); array in multi-select. |
Table sources support filter, sort, and dedupe.
Action configuration
Triggers: On value change. See Trigger List.
Sub-components
Each option renders from two sub-canvases:
- Selected — active state (highlight, checkmark, bold text).
- Unselected — default state.
Data binding: Inside sub-canvases, bind Context → Current item → Custom Selector fields (e.g. current item.name).
Actions: Each child can configure its own On click trigger and actions.
Switch
Definition
Boolean on/off input.
Custom configuration
| Property | Type | Default / options | Clients & conditions | Description |
|---|---|---|---|---|
| Style | enum | Switch / Checkbox / Round checkbox | All | Visual style. |
| Default value | boolean | false | All | Initial on/off state. |
| Scale | decimal | 0–2 | Switch style only | Overall scale. |
| Size | integer | 0–50 | Checkbox styles | Box size in px. |
| Checked color | text (color) | theme | All | Color when on. |
Action configuration
Triggers: On value change. See Trigger List.