What is it Used For?
This component is used for entering a number. Hovering over the component displays two arrows on the right, and you can increase or decrease the number by clicking them. In PCs, you can directly enter the desired number into the component by using a keyboard. In smartphones and tablets, you can scroll through the list of numbers and select the one you want.
Component Properties
① ID
Enters the ID of the numeric component (e.g. the ID of the component for entering the number of people in a reservation can be named ‘peopleCount’).
② Unit of Change
Enters the unit of number that will increase/decrease the number whenever the up/down arrow icon is clicked. For example, if the ‘Unit of Change’ is set to 100, then when you click the up arrow icon (▲), the number is increased by 100 such as 200, 300, 400, and so on.
③ Minimum/Maximum Value
Sets the range of numbers that can be entered into the component by specifying the minimum and maximum values (e.g. for the date of birth, setting the minimum value to 1900, maximum value to the current year, and the unit of change to 1). Also, if you enter a value that is lower/higher than the minimum/maximum value, then the minimum/maximum value will be automatically entered (e.g. if the maximum value is set to 100 and you enter 101, then the number will automatically change to 100).
④ Allow Empty Value
Checking the ‘Allow Empty Value’ option allows you to clear the number displayed on the numeric component. After entering a number in a numeric component, you can change the number again, but cannot clear the number. However, by checking this option, you can clear the number displayed on the component as described below.
- PC: Right-click on the component to display the pop-up menu and then select the ‘Initialize Input Data’ menu.
- Mobile: Click the trash can icon.
⑤ Tooltip Text
Displays the description in the tooltip text when you hover the mouse over an input field.