NumberInput

<ui5-number-input> | Since 2.26.0

info

The following entity is available under an experimental flag and its API and behavior are subject to change.

The ui5-number-input component is a numeric input field. It allows users to enter, edit and select numeric values.

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 ui5-number-input. 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

Description	Defines the accessible ARIA name of the component.
Type	string | undefined
Default	undefined

accessibleNameRef

Description	Receives ID (or many IDs) of the elements that label the component.
Type	string | undefined
Default	undefined

disabled

Description	Determines whether the component is displayed as disabled.
Type	boolean
Default	false

max

Description	Defines a maximum value of the component.
Type	number | undefined
Default	undefined

min

Description	Defines a minimum value of the component.
Type	number | undefined
Default	undefined

name

Description	Determines 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.
Type	string | undefined
Default	undefined

placeholder

Description	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.
Type	string | undefined
Default	undefined

readonly

Description	Determines whether the component is displayed as read-only.
Type	boolean
Default	false

required

Description	Defines whether the component is required.
Type	boolean
Default	false

step

Description	Defines a step of increasing/decreasing the value of the component.
Type	number
Default	1

value

Description	Defines a value of the component.
Type	number
Default	0

valuePrecision

Description	Determines the number of digits after the decimal point of the component.
Type	number
Default	0

valueState

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

Slots

valueStateMessage

Description	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, Critical or Negative value state.
Type	Array<HTMLElement>

Events

change

Description	Fired when the input operation has finished by pressing Enter or on focusout.
Type	CustomEvent
Bubbles	Yes
Cancelable	No

input

Description	Fired when the value of the component changes at each keystroke.
Type	CustomEvent
Bubbles	Yes
Cancelable	Yes - via preventDefault()

value-state-change

Description	Fired before the value state of the component is updated internally. The event is preventable, meaning that if its default action is prevented, the component will not update the value state.
Type	CustomEvent<NumberInputValueStateChangeEventDetail>
Parameters	valid: boolean Indicator if the value is in between the min and max value. valueState: string The new valueState that will be set.
Bubbles	Yes
Cancelable	Yes - 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

The ui5-number-input component supports several semantic value states, read-only mode, and disabled mode.