feat: add numeric mode

GDamyanov · GDamyanov · commit 03e27e2f76db · 2026-04-03T16:27:53.000+03:00
diff --git a/packages/main/src/StepInput.ts b/packages/main/src/StepInput.ts
@@ -258,6 +258,9 @@ class StepInput extends UI5Element implements IFormInputElement {
 	@property()
 	accessibleNameRef?: string;
 
+	@property({ type: Boolean })
+	hideStepButtons = false;
+
 	@property({ noAttribute: true })
 	_decIconDisabled = false;
 
diff --git a/packages/main/src/StepInputTemplate.tsx b/packages/main/src/StepInputTemplate.tsx
@@ -31,6 +31,7 @@ export default function StepInputTemplate(this: StepInput) {
 					onMouseDown={this._decSpin}
 					onMouseUp={this._resetSpin}
 					onMouseOut={this._resetSpinOut}
+					hidden={this.hideStepButtons}
 					class={{
 						"inputIcon": true,
 						"ui5-step-input-icon--clickable": this._decIconClickable,
@@ -86,6 +87,7 @@ export default function StepInputTemplate(this: StepInput) {
 						onMouseUp={this._resetSpin}
 						onMouseOut={this._resetSpinOut}
 						showTooltip={true}
+						hidden={this.hideStepButtons}
 					/>
 				</div>
 			}
diff --git a/packages/main/test/pages/StepInput.html b/packages/main/test/pages/StepInput.html
@@ -176,6 +176,12 @@ <h3>StepInput with large value and precision (thousands separator)</h3>
 		</ui5-step-input>
 	</div>
 
+	<h3> Step Input without buttons (numeric mode)</h3>
+	<ui5-step-input id="stepInputNumericMode"
+		class="stepinput2auto"
+		hide-step-buttons
+	></ui5-step-input>
+
 	<section>
 			<h3>Form validation</h3>
 			<form id="formValidation">
diff --git a/packages/website/docs/_components_pages/main/StepInput.mdx b/packages/website/docs/_components_pages/main/StepInput.mdx
@@ -4,6 +4,7 @@ slug: ../StepInput
 
 import Basic from "../../_samples/main/StepInput/Basic/Basic.md";
 import ValuePrecision from "../../_samples/main/StepInput/ValuePrecision/ValuePrecision.md";
+import Numeric from "../../_samples/main/StepInput/Numeric/Numeric.md";
 import MinMax from "../../_samples/main/StepInput/MinMax/MinMax.md";
 import States from "../../_samples/main/StepInput/States/States.md";
 
@@ -19,6 +20,9 @@ import States from "../../_samples/main/StepInput/States/States.md";
 ### Min Max
 <MinMax />
 
+### Numeric Mode
+<Numeric/>
+
 ### Value Precision
 <ValuePrecision />
 
diff --git a/packages/website/docs/_samples/main/StepInput/Numeric/Numeric.md b/packages/website/docs/_samples/main/StepInput/Numeric/Numeric.md
@@ -0,0 +1,5 @@
+import html from '!!raw-loader!./sample.html';
+import js from '!!raw-loader!./main.js';
+import react from '!!raw-loader!./sample.tsx';
+
+<Editor html={html} js={js} react={react} />
diff --git a/packages/website/docs/_samples/main/StepInput/Numeric/main.js b/packages/website/docs/_samples/main/StepInput/Numeric/main.js
@@ -0,0 +1 @@
+import "@ui5/webcomponents/dist/StepInput.js";
diff --git a/packages/website/docs/_samples/main/StepInput/Numeric/sample.html b/packages/website/docs/_samples/main/StepInput/Numeric/sample.html
@@ -0,0 +1,20 @@
+<!-- playground-fold -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sample</title>
+</head>
+<body style="background-color: var(--sapBackgroundColor);">
+<div style="width: 15rem; height: 70px">
+<!-- playground-fold-end -->
+
+<ui5-step-input value="5" min="0" max="10" step="0.5" value-precision="1" hide-step-buttons></ui5-step-input>
+<!-- playground-fold -->
+</div>
+    <script type="module" src="main.js"></script>
+</body>
+</html>
+<!-- playground-fold-end -->
+
diff --git a/packages/website/docs/_samples/main/StepInput/Numeric/sample.tsx b/packages/website/docs/_samples/main/StepInput/Numeric/sample.tsx
@@ -0,0 +1,12 @@
+import createReactComponent from "@ui5/webcomponents-base/dist/createReactComponent.js";
+import StepInputClass from "@ui5/webcomponents/dist/StepInput.js";
+
+const StepInput = createReactComponent(StepInputClass);
+
+function App() {
+  return (
+    <StepInput value={5} min={0} max={10} step={0.5} valuePrecision={1} hideStepButtons={true} />
+  );
+}
+
+export default App;

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+import "@ui5/webcomponents/dist/StepInput.js";`