Number Stepper
数字微调器
A control for stepping a number up and down, with a decrement button on the left, the current value in the middle, and an increment button on the right.
Live Demo
Actually clickableExport quantity
Range 1 – 99
What you just saw:The "− 1 +" control on each cart line, the serving-count stepper on a food delivery order.
What it actually is
A number stepper is built for small adjustments: cart quantity 1 to 2 to 3. Its difference from a slider is that a stepper suits discrete, small steps that need to be exact, while a slider suits continuous, large adjustments.
Anatomy · What it's made of
Decrement减号
Disabled at the minimum
Value数值
Centered, editable
Increment加号
Disabled at the maximum
Bounds上下限
Constrained by min/max
When to Use
When it fits, and when it doesn't| Situation | Use it? |
|---|---|
| Incrementing and decrementing within a small integer range | Yes |
| An exact value is required (dragging will not do) | Yes |
| The quantity has a minimum and a maximum | Yes |
| The user needs to adjust across a wide range | No |
| The value needs continuous decimal precision | No |
Decide what happens at zero: does it remove the row, or does it just stop decrementing?
Disable the corresponding button when a bound is reached so the limit is visible, not mysterious.
Similar Patterns
Don't mix these upNumber StepperCurrent
数字微调器
A control for stepping a number up and down, with a decrement button on the left, the current value in the middle, and an increment button on the right.
Slider
滑块
A track you drag left or right to land on a value, with the current number always shown beside it.
In one line:A control for stepping a number up and down, with a decrement button on the left, the current value in the middle, and an increment button on the right.
Slider
滑块
A track you drag left or right to land on a value, with the current number always shown beside it.
Select
下拉选择器
A box that opens downward into a list of options and collapses again once you pick one.
Button
按钮
The most basic clickable element in the interface — the user taps it and one thing happens.
Pagination
分页
A long list is cut into pages, with a row of page numbers at the bottom that lets you jump to one of them.
How to tell AI
Three levels of promptAdd the component name and specifics
Add a quantity stepper: minus and plus buttons on either side with the number in the middle, a range of 1–99, the minus button disabled at 1, the plus button disabled at 99, and a number in the middle that can also be typed into directly.
Don't just say this to AI
Bad → BetterDon't say this to AI
Add something to increment and decrement a number.
Say this instead
Add a Number Stepper: increment and decrement icon buttons flanking the value, clamped to [min,max], with the corresponding button disabled and dimmed at each bound, hit areas of at least 44x44, and tabular-nums so the digits do not jitter.
Share this card
Social-readyTurn this pattern into a 3:4 or 1:1 knowledge card and export it as PNG right in the browser. No backend needed.