Skip to main content

StepInput

<ui5-step-input> | Since 1.0.0-rc.13

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";

Basic Sample​

Properties​

value​

DescriptionDefines a value of the component.
Typenumber
Default0

min​

DescriptionDefines a minimum value of the component.
Typenumber | undefined
Defaultundefined

max​

DescriptionDefines a maximum value of the component.
Typenumber | undefined
Defaultundefined

step​

DescriptionDefines a step of increasing/decreasing the value of the component.
Typenumber
Default1

valueState​

DescriptionDefines the value state of the component.
Type"None" | "Positive" | "Critical" | "Negative" | "Information"
Default"None"

required​

DescriptionDefines whether the component is required.
Typeboolean
Defaultfalse

disabled​

DescriptionDetermines whether the component is displayed as disabled.
Typeboolean
Defaultfalse

readonly​

DescriptionDetermines whether the component is displayed as read-only.
Typeboolean
Defaultfalse

placeholder​

DescriptionDefines 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.
Typestring | undefined
Defaultundefined

name​

DescriptionDetermines the name by which the component will be identified upon submission in an HTML form.
Note: This property is only applicable within the context of an HTML Form element.
Typestring | undefined
Defaultundefined

valuePrecision​

DescriptionDetermines the number of digits after the decimal point of the component.
Typenumber
Default0

accessibleName​

DescriptionDefines the accessible ARIA name of the component.
Typestring | undefined
Defaultundefined
Since1.0.0-rc.15

accessibleNameRef​

DescriptionReceives id(or many ids) of the elements that label the component.
Typestring | undefined
Defaultundefined
Since1.0.0-rc.15

Slots​

valueStateMessage​

DescriptionDefines 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, Critical or Negative value state.
TypeArray<HTMLElement>

Events​

change​

DescriptionFired when the input operation has finished by pressing Enter or on focusout.
TypeCustomEvent
BubblesYes
CancelableNo

input​

DescriptionFired when the value of the component changes at each keystroke.
TypeCustomEvent
Since2.6.0
BubblesYes
CancelableYes - via preventDefault()

value-state-change​

DescriptionFired before the value state of the component is updated internally. The event is preventable, meaning that if it's default action is prevented, the component will not update the value state.
TypeCustomEvent<StepInputValueStateChangeEventDetail>
ParametersvalueState: string
The new valueState that will be set.
valid: boolean
Indicator if the value is in between the min and max value.
Since1.23.0
BubblesYes
CancelableYes - via preventDefault()

Methods​

No methods available for this component.

CSS Parts​

No CSS parts available for this component.

More Samples​

Min Max​

Value Precision​

States​

StepInput supports several semantic value states, readonly, disabled, etc.