StepInput SAP SE Allows the user to change the input values with predefined increments (steps). <h3>Overview</h3> The <code>StepInput</code> consists of an input field and buttons with icons to increase/decrease the value. The user can change the value of the control by pressing the increase/decrease buttons, by typing a number directly, by using the keyboard up/down and page up/down, or by using the mouse scroll wheel. Decimal values are supported. <h3>Usage</h3> The default step is 1 but the app developer can set a different one. On desktop, the control supports a larger step, when using the keyboard page up/down keys. You can set a multiple of the step with the use of the <code>largerStep</code> property. The default value is 2 (two times the set step). For example, when using the keyboard page up/down keys the value increases/decreases with a double of the default step. If the set step is 2, the larger step is also 2 and the current value is 1, using the page up key will increase the value to 5 (1 + 2*2). App developers can set a maximum and minimum value for the <code>StepInput</code>. The increase/decrease button and the up/down keyboard navigation become disabled when the value reaches the max/min or a new value is entered from the input which is greater/less than the max/min. <i>When to use</i> <ul> <li>To adjust amounts, quantities, or other values quickly.</li> <li>To adjust values for a specific step.</li> </ul> <i>When not to use</i> <ul> <li>To enter a static number (for example, postal code, phone number, or ID). In this case, use the regular {@link sap.m.Input} instead.</li> <li>To display a value that rarely needs to be adjusted and does not pertain to a particular step. In this case, use the regular {@link sap.m.Input} instead.</li> <li>To enter dates and times. In this case, use the {@link sap.m.DatePicker}, {@link sap.m.DateRangeSelection}, {@link sap.m.TimePicker}, or {@link sap.m.DateTimePicker} instead.</li> </ul> <b>Note:</b> The control uses a JavaScript number to keep its value, which has a certain precision limitation. In general, exponential notation is used: <ul> <li>if there are more than 21 digits before the decimal point.</li> <li>if number starts with "0." followed by more than five zeros.</li> </ul> Exponential notation is not supported by the control and using it may lead to unpredictable behavior. Also, the JavaScript number persists its precision up to 16 digits. If the user enters a number with a greater precision, the value will be rounded. This limitation comes from JavaScript itself and it cannot be worked around in a feasible way. 1.40 sap.ui.core/Control Sets the minimum possible value of the defined range. Sets the maximum possible value of the defined range. Increases/decreases the value of the input. <ul><b>Note:</b> <li>The value of the <code>step</code> property should not contain more digits after the decimal point than what is set to the <code>displayValuePrecision</code> property, as it may lead to an increase/decrease that is not visible for the user. For example, if the <code>value</code> is set to 1.22 and the <code>displayValuePrecision</code> is set to one digit after the decimal, the user will see 1.2. In this case, if the <code>value</code> of the <code>step</code> property is set to 1.005 and the user selects <code>increase</code>, the resulting value will increase to 1.2261 but the displayed value will remain as 1.2 as it will be rounded to the first digit after the decimal point.</li> <li>Depending on what is set for the <code>value</code> and the <code>displayValuePrecision</code> properties, it is possible the displayed value to be rounded to a higher number, for example to 3.0 when the actual value is 2.99.</li></ul> Defines the calculation mode for the provided <code>step</code> and <code>largerStep</code>. If the user increases/decreases the value by <code>largerStep</code>, this calculation will consider it as well. For example, if the current <code>value</code> is 3, <code>step</code> is 5, <code>largerStep</code> is 5 and the user chooses PageUp, the calculation logic will consider the value of 3x5=15 to decide what will be the next <code>value</code>. Increases/decreases the value with a larger value than the set step only when using the PageUp/PageDown keys. Default value is 2 times larger than the set step. Determines the value of the <code>StepInput</code> and can be set initially from the app developer. Defines the name of the control for the purposes of form submission. Defines a short hint intended to aid the user with data entry when the control has no value. Indicates that user input is required. This property is only needed for accessibility purposes when a single relationship between the field and a label (see aggregation <code>labelFor</code> of <code>sap.m.Label</code>) cannot be established (e.g. one label should label multiple fields). Defines the width of the control. Accepts the core enumeration ValueState.type that supports <code>None</code>, <code>Error</code>, <code>Warning</code> and <code>Success</code>. Defines the text that appears in the value state message pop-up. Defines whether the control can be modified by the user or not. <b>Note:</b> A user can tab to the non-editable control, highlight it, and copy the text from it. Indicates whether the user can interact with the control or not. <b>Note:</b> Disabled controls cannot be focused and they are out of the tab-chain. Determines the number of digits after the decimal point. The value should be between 0 (default) and 20. In case the value is not valid it will be set to the default value. Determines the description text after the input field, for example units of measurement, currencies. Determines the distribution of space between the input field and the description text . Default value is 50% (leaving the other 50% for the description). <b>Note:</b> This property takes effect only if the <code>description</code> property is also set. Defines the horizontal alignment of the text that is displayed inside the input field. Defines when the validation of the typed value will happen. By default this happens on focus out. Is fired when one of the following happens: <br> <ol> <li>the text in the input has changed and the focus leaves the input field or the enter key is pressed.</li> <li>One of the decrement or increment buttons is pressed</li> </ol> The new <code>value</code> of the <code>control</code>. Internal aggregation that contains the <code>Input</code>. Association to controls / IDs that label this control (see WAI-ARIA attribute aria-labelledby). Association to controls / IDs which describe this control (see WAI-ARIA attribute aria-describedby).