Skip to main content

NumberInput

<ui5-number-input> | Since 2.24.0

The ui5-number-input is a numeric input field. It allows users to enter, edit, and select numeric values. Optionally, it can display increment/decrement buttons (controlled via the internal _showStepButtons property).

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 NumberInput. 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 enter or adjust numeric values.
  • 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 enter dates and times. In this case, use date/time related components instead.

ES6 Module Import​

import "@ui5/webcomponents/dist/NumberInput.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.
Note: This property is only applicable within the context of an HTML Form element.
Typestring | undefined
Defaultundefined

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

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.
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<NumberInputValueStateChangeEventDetail>
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​

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