UI5 Web Components
Search

StepInput

v1.0.0-rc.13
@ui5/webcomponents
<ui5-step-input>

Basic Step Input

<ui5-step-input value="5"></ui5-step-input>
<ui5-step-input readonly value="5"></ui5-step-input>
<ui5-step-input disabled value="5"></ui5-step-input>

Step Input with alignment

<ui5-step-input value="5"></ui5-step-input>
<ui5-step-input value="5" style="text-align: center"></ui5-step-input>
<ui5-step-input value="5" style="text-align: right"></ui5-step-input>

Step Input with min, max, step and valuePrecision

<ui5-step-input value="5" min="0" max="10" step="1"></ui5-step-input>
<ui5-step-input value="0" min="-100" max="100" step="10"></ui5-step-input>
<ui5-step-input value="10" min="0" max="20" step="0.5" value-precision="1"></ui5-step-input>

Step Input with Value State

<ui5-step-input value="Success" value-state="Success"></ui5-step-input>
<ui5-step-input value="Warning" value-state="Warning"></ui5-step-input>
<ui5-step-input value="Error" value-state="Error"></ui5-step-input>
<ui5-step-input value="Information" value-state="Information"></ui5-step-input>

Step Input with Label

Number 
<ui5-label for="myStepInput" required show-colon>Number</ui5-label>
<ui5-step-input id="myStepInput" placeholder="Enter your Number" required></ui5-step-input>

Overview

The ui5-step-input consists 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.

Usage

The 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 ui5-input instead.
  • To display a value that rarely needs to be adjusted and does not pertain to a particular step. In this case, use the regular ui5-input instead.
  • To enter dates and times. In this case, use date/time related components instead.

ES6 Module Import

import "@ui5/webcomponents/dist/StepInput.js";

Properties/Attributes

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.

Name
Type
Default Value
Description
accessibleName
accessible-name
string
Defines the accessible ARIA name of the component.
since v1.0.0-rc.15
accessibleNameRef
accessible-name-ref
string
""
Receives id(or many ids) of the elements that label the component.
since v1.0.0-rc.15
disabled
boolean
false
Determines whether the component is displayed as disabled.
max
Float
Defines a maximum value of the component.
min
Float
Defines a minimum value of the component.
name
string
""
Determines the name with which the component will be submitted in an HTML form.

Important: For the name property to have effect, you must add the following import to your project: import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";

Note: When set, a native input HTML 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.
placeholder
string
undefined
Defines a short hint, intended to aid the user with data entry when the component has no value.

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.
readonly
boolean
false
Determines whether the component is displayed as read-only.
required
boolean
false
Defines whether the component is required.
step
Float
1
Defines a step of increasing/decreasing the value of the component.
value
Float
0
Defines a value of the component.
valuePrecision
value-precision
Integer
0
Determines the number of digits after the decimal point of the component.
valueState
value-state
ValueState
"None"
Defines the value state of the component.

Available options are:
  • None
  • Error
  • Warning
  • Success
  • Information

Slots

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 default slot.

Slot
Type
Description
valueStateMessage
HTMLElement
Defines the value state message that will be displayed as pop up under the component.

Note: If not specified, a default text (in the respective language) will be displayed.
Note: The valueStateMessage would be displayed, when the component is in Information, Warning or Error value state.

Events

This Web Component fires semantic events upon user interaction. You can bind to these events with the standard DOM APIs, such as addEventListener.

Name
Description
change
Fired when the input operation has finished by pressing Enter or on focusout.
Theme: Morning Horizon (Light) Evening Horizon (Dark) Horizon High Contrast Black Horizon High Contrast White Quartz Light Quartz Dark Quartz High Contrast Black Quartz High Contrast White
Content Density: Cozy Compact
Text Direction: LTR RTL
Apply Cancel