Skip to main content

Number Input (ALPHA)

BusinessEnterprise
Alpha feature: invite only

Responsive Widgets are in alpha and available by invitation only on Business and Enterprise plans. Behavior and properties may change. To request access, open a support ticket and name the feature Responsive Widgets (ALPHA).

The Number Input widget is a field for numbers, such as a quantity or an age. You can set the lowest and highest values allowed.

  • Users can type digits only. Other keys are blocked, apart from keys such as Backspace, Tab, Enter, Delete, and the arrow keys.
  • The Up and Down arrow keys raise or lower the value by 1.
  • Pasted text is accepted only when it is a number.

The Number Input has the same properties as the Input widget, with Data type set to Number.

Widget type: WDS_NUMBER_INPUT_WIDGET

Number Input widget in a Responsive app
Number Input widget

Content properties​

These properties appear in the Content tab of the property pane.

Type​

Data type string​

Sets the type of data the field takes. For this widget it is Number. Options:

  • Single-line text
  • Multi-line text
  • Number
  • Password
  • Email
  • Phone number
  • Currency
  • Date

When you pick a different type, the widget changes into the matching widget. For example, Currency changes it into a Currency Input.

Data​

Value string​

Sets the starting value of the field. When this value changes, the field updates to the new value. The value must be a number. Leave it empty for no starting value.

Example:

{{AnvilTable1.selectedRow.quantity}}

Label​

Text string​

The label shown above the field. Default: Label.

Validation​

This section shows only when Readonly is off.

Required boolean​

Makes the field mandatory. If a user clears the field, it shows "This field is required." Off by default.

Min number​

Sets the lowest value allowed. Must be less than Max. If the value is lower, the field is invalid.

Max number​

Sets the highest value allowed. Must be greater than Min. If the value is higher, the field is invalid.

Regex string​

Checks the value against a regular expression. If the value does not match, the field is invalid and shows Error message.

Example:

^\d{1,3}$

Valid boolean​

Sets whether the value is valid, using a JavaScript expression. If the expression returns false, the field is invalid and shows Error message. Default: true.

Example:

{{NumberInput1.text % 5 === 0}}

Error message string​

The message shown when the Regex or Valid check fails.

General​

Tooltip string​

Adds a help icon next to the label. Users see this text when they open the help icon.

This property shows only when Readonly is off.

Placeholder string​

Text shown inside the field when it is empty.

This property shows only when Readonly is off.

Visible boolean​

Controls whether the widget shows in the app. On by default.

Disabled boolean​

Stops users from typing in the field. Off by default.

This property shows only when Readonly is off.

Readonly boolean​

Lets users select the value but not change it. Readonly takes priority over Disabled. Off by default.

When you turn this switch on in the property pane, the widget changes into a KeyValue widget that shows the value as read-only text. When you turn it off, the widget changes back to the type set in Data type.

Animate loading boolean​

Shows a loading animation while the widget loads. On by default.

Auto focus boolean​

Puts the cursor in the field when the page loads. Off by default.

This property shows only when Readonly is off.

Style properties​

These properties appear in the Style tab of the property pane.

Icon​

Icon string​

Adds an icon inside the field. Pick an icon from the list, or bind an icon name.

Position string​

Sets which side of the field the icon is on: left (default) or right.

This property shows only when you have picked an Icon.

Reference properties​

Reference properties let you read the widget's state in bindings and code, for example {{NumberInput1.isVisible}}. You cannot set them directly.

text number​

The value as a number. It is null when the field is empty or the value is not a number.

Example:

{{NumberInput1.text}}

rawText string​

The value exactly as the user typed it.

Example:

{{NumberInput1.rawText}}

isValid boolean​

Is true when the value passes all checks: Required, Regex, Valid, Min, and Max. An empty field that is not required is valid.

Example:

{{NumberInput1.isValid}}

isVisible boolean​

Shows whether the widget is visible.

Example:

{{NumberInput1.isVisible}}

isDisabled boolean​

Shows whether the widget is disabled.

Example:

{{NumberInput1.isDisabled}}

isReadOnly boolean​

Shows whether the widget is read-only.

Example:

{{NumberInput1.isReadOnly}}

Methods​

Methods let you change the widget's properties from code, for example in a JS Object.

setVisibility (param: boolean): Promise​

Shows or hides the widget.

Example:

NumberInput1.setVisibility(true)

setDisabled (param: boolean): Promise​

Turns Disabled on or off.

Example:

NumberInput1.setDisabled(false)

setReadOnly (param: boolean): Promise​

Turns Readonly on or off.

Example:

NumberInput1.setReadOnly(true)

setRequired (param: boolean): Promise​

Turns Required on or off.

Example:

NumberInput1.setRequired(true)

setValue (param: string): Promise​

Sets the value of the field.

Example:

NumberInput1.setValue("10")

Events​

The Events section shows only when Readonly is off.

onTextChanged​

Runs each time the user changes the text.

onFocus​

Runs when the field gets focus.

onBlur​

Runs when the field loses focus.

onSubmit​

Runs when the user presses Enter. It runs only when the value is valid.

Reset on submit boolean​

This setting appears in the Events section. When it is on, the field clears after onSubmit runs without errors. On by default.