Skip to main content

Number input

What is Number Input?

The number Input component is a user interface element that allows users to enter and edit the number in a form or input field.


Default valueThe initial value of the component. You can dynamically change the initial value by typing JavaScript in {{}}.
PlaceholderThe value will be shown when the input field is empty.
Decimal placespecify the number of decimal places that can be entered in the number input.
Minimumminimum value that can be entered in the number input
Maximummaximum value that can be entered in the number input
LabelThe name of the field displayed to the user
CaptionA caption used to describe the field in detail
Hidden labelSet whether to display the label
PositionSet the position of the label relative to the component
AlignmentSet the alignment (align to left or right) of the label
WidthWhen the label is on the left side of the component, set the width ratio of the label.
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
Loadingmaximum value that can be entered in the number input
DisabledControl the status of whether the component is disabled. The component cannot be modified or focused when it is disabled.
Read OnlyControl the status of whether the component is read-only. A read-only component can be selected and focused but cannot be modified.
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
Prefix texta short piece of text that appears to the left of the input field, often used to provide additional context or instructions to the user
Suffix texta short piece of text that appears to the right of the input field, often used to provide additional information or feedback to the user
Required fieldValid only when the switch is on.
Custom ruleCreate your validation logic here. The rules should be made in JavaScript and covered by {{}}.
Hide validation messageYou can hide the error message by switching the hidden status when the input value is incorrect. You can dynamically change the hidden status by JavaScript.
Form Data KeySpecify a key of a wrapping form component when constructing the data attribute.
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.
Theme ColorAllows users to specify the button's background color and opacity


You can use other components to control the component. We support the following two methods:

  • focus

When the focus method is called, the number input field will be highlighted and ready for the user to start typing without the need for the user to click on the number input field

  • setValue

To set the number input value, for example, {{”value1”}}

ValueInput value
  • clearValue

To clear the value of the selected component

  • validate

To verify that the input information is legal

  • clearValidate

To clear the validation message

Event handler

ChangeWhen a user changes the input value
FocusWhen a user moves the mouse cursor on the input component
BlurWhen a user is done inputting value and quit from focusing on the component


The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
valueuser input value
colorSchemebackground color of the button
customRuleuser-defined rule or validation logic that can be applied to the number input component
disableda Boolean value indicate the disabled status
displayNamethe name of this component (ie button1)
eventsgenerated or triggered when certain actions or events occur within the number input component.
formDataKeythe Form Data Key of input
hiddenhidden status (true or false)
labellabel value
labelAlignalignment of input label (left or right)
labelPositionposition of input label (left or right)
labelWidththe integer representing width of label.
maxthe value of maximum
minthe value of minimum
placeholderplaceholder value
prefixvalue of the prefix
suffixvalue of the suffix
readOnlya Boolean value indicate the readyOnly status of input.
requireda Boolean value indicate the required status of input.
showCharacterCounta Boolean value indicate whether the character count of input is displayed
tooltipTextvalue of tooltip text

Example: {{numberInput1.value}}

Use case

Next, we will demonstrate how to map the data from the data source to number input with a button.

Step 1 Add an action

Let us create a table in Amazon S3. One of the documents is called

'111.txt' with the number '111' as its data. This is the value we want to show in number input.


Then we can create a new action for Amazon S3 from the action list, listing all the data in the bucket and named s31.

Select Read an object for **Action Type**. Put 111.txt for **Object Key.**

Click Save and Run to activate this action.


Step 2 Add Components

Next, we can add a number input component and a button component to the canvas.

We set the default value of numberInput to be 1 and labeled the button as 'Set value' as shown below


Step 3 Configure the component

For the button component, we can configure it to set the value in number input component to the data of the document we read from s31 api.

  1. In the Edit event handler, select Control component in action, and select the numberInput1 component that you want to update as the target of the event.
  2. Choose the setValue action and set the value as {{}}


Step 4 Test

Now that when you click the 'Set value' button, the value should change to 111.