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​

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

disabled​

DescriptionDetermines whether the component is displayed as disabled.
Typeboolean
Defaultfalse

max​

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

min​

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

name​

DescriptionDetermines the name by which the component will be identified upon submission in an HTML form.
Typestring | undefined
Defaultundefined

placeholder​

DescriptionDefines a short hint, intended to aid the user with data entry when the component has no value.
Typestring | undefined
Defaultundefined

readonly​

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

required​

DescriptionDefines whether the component is required.
Typeboolean
Defaultfalse

step​

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

value​

DescriptionDefines a value of the component.
Typenumber
Default0

valuePrecision​

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

valueState​

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

Slots​

valueStateMessage​

DescriptionDefines the value state message that will be displayed as pop up under the component.
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>
Parametersvalid: boolean
Indicator if the value is in between the min and max value.
valueState: string
The new valueState that will be set.
Since1.23.0
BubblesYes
CancelableYes - via preventDefault()

Methods​

No methods available for this component.

CSS Parts​

No CSS parts available for this component.

CSS Custom States​

No CSS custom states available for this component.

More Samples​

Min Max​

Value Precision​

States​

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