Number Input

Tips & examples

An interactive numeric input box with custom formatting masks (thousand/decimal separators, custom masks) and support for persistent left/right visual adornments (icons or text).

When to use

Capturing numeric inputs inside forms where precise mask formatting (decimal precision, custom separators, number masks) or visual adornments (icons/prefixes) are needed.
Collecting financial, statistical, or masked numerical data that binds directly to database schema fields.

What you need

The Data Source configuration section remains deactivated until a default_form is present on the page layout. Once linked to a form via Element ID and Field Path, the input binds directly to the form’s state and schema.

Data Source section attributes remain locked until a default_form is actively placed in the workspace hierarchy.

Examples

A currency entry field formatted with a custom prefix, thousand separators (’,’) and fixed 2-digit decimal precision.
A phone number or structured ID input using a custom masking pattern like ‘##### ## #’.

Avoid

Using for simple read-only numerical displays, use the number_field component instead.
Attempting to configure data bindings before placing a parent default_form element on the canvas.

Pairs well with

Form — Provides the underlying form context, validation errors, and mutation handlers.

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 numeric value loaded into the field before user interaction.
Default: none
PrecisionoptionalNumber: Number of decimal places allowed (e.g., 1 for 0.0, 2 for 0.00).
Default: none
PrefixoptionalText: Static string placed directly before the number.
Example $
Default: none
SuffixoptionalText: Static string placed directly after the number.
Example USD
Default: none
Thousand SeparatoroptionalText: Character used to separate thousands (e.g., ‘,’ for 1,000).
Example ,
Default: none
Decimal SeparatoroptionalText: Character used for decimals (e.g., ‘.’ for 9.8).
Example .
Default: none
FormatoptionalText: Expression controlling how the value is displayed.
Example ##### ## #
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

Styling

Start AdornmentoptionalText: Static text shown before the number.
Default: none
Start Adornment IconoptionalText: Icon shown before the number.
Default: none
End AdornmentoptionalText: Static text shown after the number.
Default: none
End Adornment IconoptionalText: Icon shown after the number.
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 — Label text shown above the input field.

Accessibility

Standard accessible numeric input exposing ARIA value attributes and keyboard controls for incrementing/decrementing values.

Up and Down arrow keys increment or decrement numeric values.

Expressions

Values you can read in expressions

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

elements.myNumberInput.<property>

value number Current input value of this control. elements.myNumberInput.value

When The current number in the form, before saving. Use it in arithmetic elsewhere on the page — a running total or a derived price.

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

touched boolean Map of fields the user has interacted with. elements.myNumberInput.touched

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

Replace myNumberInput 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 a form is linked as a data source, it transitions behavior from local state management to form-bound schema state tracking.

Sample configuration

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{
  "config": {
    "dataSource": {
      "elementId": "myElement",
      "fieldPath": [
        "fieldPath"
      ]
    },
    "defaultValue": 0,
    "disabled": false,
    "nullable": false,
    "startAdornment": "startAdornment",
    "endAdornment": "endAdornment",
    "startAdornmentIcon": "startAdornmentIcon",
    "endAdornmentIcon": "endAdornmentIcon",
    "precision": 0,
    "prefix": "prefix",
    "suffix": "suffix",
    "thousandSeparator": "thousandSeparator",
    "decimalSeparator": "decimalSeparator",
    "format": "format"
  }
}

Ready-made setups

Formatted Currency Number Input ↕

A form-bound numeric input with custom currency prefix, thousand separators, 2-decimal precision, and a left icon adornment.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
{
  "config": {
    "dataSource": {
      "elementId": "paymentForm",
      "fieldPath": [
        "amount"
      ]
    },
    "input": {
      "precision": 2,
      "thousandSeparator": ",",
      "decimalSeparator": ".",
      "prefix": "$",
      "disabled": "@@expression: false",
      "nullable": false
    },
    "styling": {
      "startAdornmentIcon": "attach_money"
    }
  }
}