feat(ui5-number-input): introduce NumberInput component by GDamyanov · Pull Request #13799 · UI5/webcomponents

GDamyanov · 2026-07-08T11:29:34Z

Summary

Introduces a new ui5-number-input component as the dedicated numeric input primitive, and refactors ui5-step-input to be built on top of it.

New Component: ui5-number-input

A numeric input field ui5-number-input has been extracted as a standalone component. It handles all numeric input logic internally:

Number formatting via locale-aware NumberFormat
Min/max validation with value-state-change event (preventable)
Keyboard navigation: arrow keys, Ctrl/Shift modifiers, Page Up/Down
Mouse wheel support
Spin button acceleration on long-press
Increment/decrement buttons (opt-in via _showStepButtons)
Form association support
Full accessibility (ARIA labels, value state messages)

Refactored: ui5-step-input

ui5-step-input is now a thin wrapper around ui5-number-input, delegating all numeric logic to it

A new private property is added in the ui5-number-input:

_showStepButtons is a @Private, noAttribute boolean property on ui5-number-input (defaults to false) that controls whether the increment/decrement buttons are rendered. When false, ui5-number-input renders as a plain numeric input with no step buttons — suitable for standalone use. ui5-step-input sets _showStepButtons={true} in its template, which activates the buttons and the associated CSS modifier class (ui5-number-input-root--with-buttons). This means the step button UI lives entirely inside ui5-number-input; ui5-step-input does not render any buttons of its own.

Breaking Changes

BREAKING CHANGE: ui5-step-input shadow DOM internals changed

ui5-step-input now composes ui5-number-input internally instead of ui5-input.
Any CSS, querySelector, or ::part() targeting the previous inner [ui5-input]
(.ui5-step-input-root, .ui5-step-input-input) will no longer work and must be edited

github-actions · 2026-07-08T11:31:37Z

👋 Heads-up: dev close is in effect

Thanks for the contribution! This repository is currently in dev close ahead of release next (scheduled 2026-07-09, UTC). See the release schedule for the full timeline.

This PR appears to introduce public-API changes (detected by diffing the Custom Elements Manifest against the latest published version on npm):

@ui5/webcomponents

➕ added element: NumberInput
➕ added property: accessibleName
➕ added property: accessibleNameRef
➕ added property: disabled
➕ added property: max
➕ added property: min
➕ added property: name
➕ added property: placeholder
➕ added property: readonly
➕ added property: required
➕ added property: step
➕ added property: value
➕ added property: valuePrecision
➕ added property: valueState
➕ added event: change
➕ added event: input
➕ added event: value-state-change
➕ added slot: valueStateMessage
➕ added attribute: accessible-name
➕ added attribute: accessible-name-ref
➕ added attribute: disabled
➕ added attribute: max
➕ added attribute: min
➕ added attribute: name
➕ added attribute: placeholder
➕ added attribute: readonly
➕ added attribute: required
➕ added attribute: step
➕ added attribute: value
➕ added attribute: value-precision
➕ added attribute: value-state
🔄 changed attribute value-state (type)

Could you please hold off on merging into main until the release ships? Public-API changes are best landed in the next dev cycle so they don't slip into the release at the last minute. Once the release is out, this PR is good to go.

If this change must ship in the current release, please request a review from one or two members of @UI5/ui5-team-webc so the team can sign off explicitly.

💬 False positive? If you believe this PR doesn't actually change the public API (e.g. only internal refactoring, or an entry the detector mis-attributed), please reply on this thread — your feedback helps us improve the detection during this trial run.

Posted automatically by the Dev Close Notice workflow.

sap-ui5-webcomponents-release · 2026-07-08T11:36:58Z

🚀 Deployed on https://pr-13799--ui5-webcomponents-preview.netlify.app

hinzzx · 2026-07-24T14:03:25Z

+	}
+
+	get _displayValue() {
+		if (this._languageChanged) {


getters invoked from templates should be pure, so i think we have to move this flag reset out of the getter (e.g. into onBeforeRendering or the language handler).

Fixed in edef75d

hinzzx · 2026-07-24T14:07:56Z

+		value = this._preciseValue(value);
+		if (value !== this.value) {
+			this.value = value;
+			this._inputValue = this._formatNumber(value);


the _inputValue is never set back to undefined

the template renders value={this._inputValue ?? this._displayValue}

The language-change handler resets the formatter/delimiters and sets _languageChanged = true, but does not clear _inputValue. So once the user has interacted, switching locale will not re-format the displayed number (e.g. 1,234.50 won't become 1.234,50).

Fixed in edef75d

nnaydenow · 2026-07-27T13:10:43Z

Please add it to FormSupport related pages and tests. Don't forget to put new badge in the documentation page.

GDamyanov · 2026-07-27T20:00:20Z

Please add it to FormSupport related pages and tests. Don't forget to put new badge in the documentation page.

Fixed in 03306d9

LilyanaOviPe · 2026-08-20T13:28:06Z

+<ValuePrecision />
+
+### States
+NumberInput supports several semantic value states, readonly, disabled, etc.


Suggested change

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

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

LilyanaOviPe · 2026-08-20T13:31:34Z

+/**
+ * Fired when the value of the component changes at each keystroke.
+ * @public
+ * @since 2.6.0


Should this stay as it is or change to since 2.24.0?

LilyanaOviPe · 2026-08-20T13:31:42Z

+ * Fired 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.
+ * @since 1.23.0


Should this stay as it is or change to @SInCE 2.24.0?

LilyanaOviPe · 2026-08-20T13:32:06Z

+	 * Receives id(or many ids) of the elements that label the component.
+	 * @default undefined
+	 * @public
+	 * @since 1.0.0-rc.15


Should this stay as it is or change to since 2.24.0?

LilyanaOviPe · 2026-08-20T13:37:42Z

+ *
+ * ### Overview
+ *
+ * The `ui5-number-input` is a numeric input field. It allows users to enter, edit, and select numeric values.


Suggested change

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

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

does it actually allow users to select values or just enter and edit?

LilyanaOviPe · 2026-08-20T13:40:43Z

+ * Fired 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.


Suggested change

* Fired 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.

* 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.

LilyanaOviPe · 2026-08-20T13:41:40Z

+ *
+ * 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`.


Suggested change

* App developers can set a maximum and minimum value for the `NumberInput`.

* App developers can set a maximum and minimum value for `ui5-number-input`.

LilyanaOviPe · 2026-08-20T13:43:12Z

+	accessibleName?: string;
+
+	/**
+	 * Receives id(or many ids) of the elements that label the component.


Suggested change

* Receives id(or many ids) of the elements that label the component.

* Receives ID (or many IDs) of the elements that label the component.

LilyanaOviPe · 2026-08-20T13:50:39Z

+	 * Defines the accessible ARIA name of the component.
+	 * @default undefined
+	 * @public
+	 * @since 1.0.0-rc.15


Is this correct or should it be 2.24.0?

GDamyanov added 2 commits July 8, 2026 11:56

feat: introduce new numberinput component

b166942

fix: update text keys

8d60623

GDamyanov self-assigned this Jul 8, 2026

GDamyanov temporarily deployed to netlify-preview July 8, 2026 11:29 — with GitHub Actions Inactive

fix: lint errors

0840e44

GDamyanov temporarily deployed to netlify-preview July 8, 2026 11:40 — with GitHub Actions Inactive

test: add test suite

a101ccd

GDamyanov temporarily deployed to netlify-preview July 8, 2026 11:44 — with GitHub Actions Inactive

test: add test suite

1711fea

GDamyanov temporarily deployed to netlify-preview July 8, 2026 12:04 — with GitHub Actions Inactive

test: fix test

eb94d13

GDamyanov temporarily deployed to netlify-preview July 8, 2026 12:36 — with GitHub Actions Inactive

Merge branch 'main' into number-input

3984464

GDamyanov temporarily deployed to netlify-preview July 8, 2026 12:39 — with GitHub Actions Inactive

fix: remove propagated attribute

3cd9f44

GDamyanov temporarily deployed to netlify-preview July 8, 2026 13:40 — with GitHub Actions Inactive

fix: propagate external label reference

3072196

GDamyanov temporarily deployed to netlify-preview July 8, 2026 14:05 — with GitHub Actions Inactive

GDamyanov requested a review from hinzzx July 8, 2026 14:26

fix: apply visual spec

0e2197b

GDamyanov temporarily deployed to netlify-preview July 9, 2026 14:16 — with GitHub Actions Inactive

fix: apply hc themes

c26861f

GDamyanov temporarily deployed to netlify-preview July 9, 2026 19:39 — with GitHub Actions Inactive

fix: apply css param

ad59c41

GDamyanov temporarily deployed to netlify-preview July 10, 2026 06:21 — with GitHub Actions Inactive

fix: apply css param

f163347

GDamyanov temporarily deployed to netlify-preview July 10, 2026 06:49 — with GitHub Actions Inactive

fix: apply correct focus styles

ce0c645

GDamyanov temporarily deployed to netlify-preview July 20, 2026 07:28 — with GitHub Actions Inactive

fix: address review comments

f231d05

GDamyanov temporarily deployed to netlify-preview July 20, 2026 08:08 — with GitHub Actions Inactive

fix: address review comments

62bd1a8

GDamyanov temporarily deployed to netlify-preview July 20, 2026 08:21 — with GitHub Actions Inactive

fix: address review comments

a8646cf

GDamyanov temporarily deployed to netlify-preview July 20, 2026 09:04 — with GitHub Actions Inactive

fix: address review comments

cfc4ac9

GDamyanov temporarily deployed to netlify-preview July 20, 2026 09:08 — with GitHub Actions Inactive

GDamyanov requested a review from hinzzx July 20, 2026 11:45

Merge branch 'main' into number-input

f9dcbec

GDamyanov temporarily deployed to netlify-preview July 20, 2026 16:13 — with GitHub Actions Inactive

fix: register component in react playground

b2a6a81

GDamyanov temporarily deployed to netlify-preview July 20, 2026 16:23 — with GitHub Actions Inactive

hinzzx reviewed Jul 24, 2026

View reviewed changes

test: add test suites

03306d9

GDamyanov temporarily deployed to netlify-preview July 27, 2026 19:23 — with GitHub Actions Inactive

fix: update value when language is changed in onbeforerendering

edef75d

GDamyanov temporarily deployed to netlify-preview July 27, 2026 19:49 — with GitHub Actions Inactive

fix: clean value

4a68a23

GDamyanov temporarily deployed to netlify-preview July 27, 2026 19:56 — with GitHub Actions Inactive

Merge branch 'main' into number-input

647a46e

GDamyanov temporarily deployed to netlify-preview July 27, 2026 20:00 — with GitHub Actions Inactive

GDamyanov requested a review from hinzzx July 29, 2026 06:44

GDamyanov requested a review from LilyanaOviPe August 20, 2026 12:38

Merge branch 'main' into number-input

dc3724a

GDamyanov deployed to netlify-preview August 20, 2026 12:44 — with GitHub Actions Active

LilyanaOviPe reviewed Aug 20, 2026

View reviewed changes

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

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

	* App developers can set a maximum and minimum value for the `NumberInput`.
	* App developers can set a maximum and minimum value for `ui5-number-input`.

	* Receives id(or many ids) of the elements that label the component.
	* Receives ID (or many IDs) of the elements that label the component.

Uh oh!

Conversation

GDamyanov commented Jul 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Breaking Changes

Uh oh!

github-actions Bot commented Jul 8, 2026

👋 Heads-up: dev close is in effect

Uh oh!

sap-ui5-webcomponents-release Bot commented Jul 8, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

nnaydenow commented Jul 27, 2026

Uh oh!

GDamyanov commented Jul 27, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

GDamyanov commented Jul 8, 2026 •

edited

Loading