Basic Step Input
Step Input with alignment
Step Input with min, max, step and valuePrecision
Step Input with Value State
Step Input with Label
ui5-step-inputconsists of an input field and buttons with icons to increase/decrease the value with the predefined step.
The user can change the value of the component 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.
UsageThe default step is 1 but the app developer can set a different one. App developers can set a maximum and minimum value for the
StepInput. 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.
When to use:
- To adjust amounts, quantities, or other values quickly.
- To adjust values for a specific step.
When not to use:
- To enter a static number (for example, postal code, phone number, or ID). In this case, use the regular
- To display a value that rarely needs to be adjusted and does not pertain to a particular step. In this case, use the regular
- To enter dates and times. In this case, use date/time related components instead.
ES6 Module Import
You can use both properties and attributes with the same effect. The name of each attribute is listed below the name of the property, if different.
Important: For the
nameproperty to have effect, you must add the following import to your project:
Note: When set, a native
inputHTML element will be created inside the component so that it can be submitted as part of an HTML form. Do not use this property unless you need to submit a form.
Note: When no placeholder is set, the format pattern is displayed as a placeholder. Passing an empty string as the value of this property will make the component appear empty - without placeholder or format pattern.
Available options are:
This Element provides slot(s). This means it can display its child nodes.
Unless targeting the default slot, use the
slot attribute to define the destination slot for each child.
Text, along with HTML Elements with no
slot attribute, goes the the
Note: If not specified, a default text (in the respective language) will be displayed.
valueStateMessagewould be displayed, when the component is in
This Web Component fires semantic events upon user interaction. You can bind to these events with the standard DOM APIs, such as