Stepper (+/−)

Two bunches of bananas. Three guests at the table. One adult, two children on the flight. Every time an app asks “how many?”, there’s a good chance it answers with a stepper: a minus, a number, a plus.

It’s the simplest control on the screen, and one of the most expensive to get wrong: the number in a cart stepper becomes money. Let’s see where it breaks.

What is a stepper?

A stepper is a control that changes a number by a fixed step (usually 1) with a decrease (−) and an increase (+) button. The value stays between a minimum and a maximum.

You’ll find steppers in:

• Shopping carts: quantity of each product.
• Bookings: guests, rooms, adults/children, nights.
• Recipes and fitness: servings, sets, reps.
• Settings: number of copies to print, reminder minutes.

Anatomy

What to know about the value

• Min and max. At the limit, the matching button must be disabled (and look it). Common limits: 1 for a cart line (0 means “remove”), the stock reported by the server, “max 8 guests”, “max 9 travellers in total”.
• Step size. Usually 1, but not always: 0.5 kg of cheese, packs of 6, 15-minute slots. Check the value can’t land between steps.
• Typing. Some steppers let you tap the number and type “12”. Then everything from text fields applies: validation, the keyboard type, what happens to “05”, “1e2”, “-3” or an empty field.
• Long-press. Many steppers repeat while you hold the button and speed up after a while. It must stop at the limit and stop when you let go.
  Dev note

  iOS UIStepper repeats by default.

Stepper vs slider vs text field

Component	Best for	Weak at
Stepper	Small exact numbers, small changes (1–10)	Big jumps: 1 → 50 needs 49 taps
Slider	Rough values in a range (volume, price range)	Exact values
Text field (number)	Any exact number, big ranges	Quick +1 changes, limits are invisible

A good rule: if users usually change the value by one or two, use a stepper. If the value can be large, let users type (an editable stepper or a plain field).

Designs & variants

All of these work. Hold + or − to repeat, and try the editable ones with the keyboard (↑ ↓ Home End).

Dark

Guests: 2

Oat milk 1 L

€2.49 · 4 in stock

2

Servings4

Quantity

Adults

Age 16+

2

Children

Age 2–15 · max 9 travellers

0

Tickets

input.value = "2"

Dev note: One name, many implementations

iOS has a native UIStepper (SwiftUI: Stepper). Material Design has no stepper component, so Android apps build their own from icon buttons, and Android’s older NumberPicker is a scroll wheel instead. On the web you get <input type="number"> or, more often, a custom component. Custom means every team makes slightly different decisions, and that’s where bugs hide.

The web’s number input and its quirks

<input type="number"> looks like the perfect stepper: arrows, min, max, step. But it has surprises every web tester should know:

🔢 Native number input, under the microscope

This is a real <input type="number" min="1" max="10" step="1">. Type the samples below and watch what the browser reports.

Tickets

value

"1"

valueAsNumber

1

Number(value)

1

parseInt(value)

1

validity

valid

Click into the field, then scroll the mouse wheel over it. Value changes caused by the wheel: 0Chromium browsers change a focused number input on wheel; others may not. Try several browsers.

• 05value "05". Number() gives 5, but an app that keeps the string shows "05" and may even do "05" + 1 = "051".
• 1e2Valid scientific notation: value "1e2", which is 100. parseInt("1e2") gives 1. Two parts of the app can disagree.
• eAllowed to type, but not a number: value is "" (empty) and badInput is true. The app sees an empty field.
• 2.5Valid number, but stepMismatch is true for step="1". Does the app round, reject or send 2.5 items?
• -3Below min="1": rangeUnderflow. The browser only flags it; nothing stops the app from sending it.
• 99Above max="10": rangeOverflow. Same story: min/max are hints until a form is validated.

• “e” is allowed, because 1e2 (= 100) is a valid number in scientific notation. “e” on its own makes the value empty, not an error the app can see.
• The mouse wheel can change the value in Chromium browsers when the field is focused. Users scroll the page and silently order 7 instead of 2.
• min, max and step are only hints. The browser flags invalid values (validity), but nothing stops the app from sending them unless the form is validated.
• Leading zeros stay in the text (“05”), and code that treats the value as a string can do "05" + 1 = "051".

Dev note

That’s why many shops use type="text" inputmode="numeric" with their own validation instead.

When to use it

A stepper is a good choice when:

• The number is small and exact: 1–10 items, guests, tickets.
• Users usually change it by one or two from a sensible default.
• The limits are known and meaningful (stock, max guests), and can be shown.
• The change is easy to see and to undo: the number and the total update right away.

Good and bad uses

Common bugs

#	Bug	What you see	Typical severity
1	+ enabled at the stock limit	Tap + at the limit, the server refuses, the number jumps back (or checkout fails)	Medium–High
2	Typed value not validated	“05”, “1e2”, “-3” or an empty field break the total or reach the server	High
3	Shown and saved quantity differ	After quick taps the field says 6, the order is for 3	Critical (money)
4	− at 1 removes without warning	One tap too many and the item is gone, no undo	Medium
5	Long-press doesn’t stop	Value keeps running after release, or runs past the max	Medium
6	Disabled state lies	− looks disabled at 1 but still works (or the other way round)	Low–Medium
7	Silent for screen readers	“Button, button”, and the new value is never announced	High (for affected users)
8	Mouse wheel changes the number	Scrolling the page over a focused field changes the quantity	Medium
9	Tiny buttons	− and + are 24 px apart; users hit the wrong one	Medium

Stress-test it

Tap + as fast as you can, or hold it, and then wait. Switch between the three sync strategies and compare what the cart shows with what the server saved.

📶 Rapid taps vs the network

Tap + five times as fast as you can (or hold it), then wait. Does the cart agree with the server?

How the app syncs

Every tap, trust every replyEvery tap, ignore old repliesDebounce, then send once

Network

StableUnstable (4G)

Reset

Bananas (bunch)

€1.99 each · total €1.99

1

Cart shows

1

Server saved

1

Requests

0

Tap + quickly a few times.

Network lognewest first

• No requests yet…

Find the bug

This grocery web shop has a basket with six bugs. Explore it like a real tester:

• Push every quantity to its limit, and past it.
• Type into the quantity field: “05”, “1e2”, nothing at all. Then press +.
• Tap + quickly several times, wait, then compare the field with the subtotal. Watch the network log.
• Bring a quantity down to 1, and press − once more.
• Turn on the screen reader captions and Tab through a row, then press Enter on +.
• Click into a quantity field, then scroll the page with the mouse wheel.

🐞 Bug hunt: Grocery basket

This demo has 6 hidden bugs. Explore it like a tester, then check your findings.

Found0/6

grocer.example.com

Your basket

• 🍌

  Organic bananas

  €1.99 · in stock

  €3.98
• 🥛

  Oat milk 1 L

  €2.49 · only 4 left

  €7.47
• 🍞

  Sourdough loaf

  €3.80 · in stock

  €3.80

Subtotal (6 items)€15.25

Delivery €2.99

Total€18.24

Checkout · €18.24

Device settings

Restart app

Screen reader (VoiceOver captions)

Network log0 requests

• Change a quantity to see API requests…

1. 1

   Hint: Oat milk has only 4 left. Press + until you pass 4.

   + stays enabled at the stock limit

   At 4, + still looks and works like a normal button. Going to 5 sends qty=5, the server answers 409, a toast appears and the number jumps back. Expected: + is disabled at the stock limit, with a hint like "Max 4", so the request never happens.

   Reveal answer✓ I found this
2. 2

   Hint: Type 05 into the bananas field and press Enter, then press +. Then try 1e2.

   Typed quantities are not validated

   The field keeps whatever you type as text. "05" stays "05", and + then makes it "051" (string + 1), which the server rejects. "1e2" is sent as qty=1e2; the server answers 400, the app ignores the error, the field keeps "1e2" and the row shows the price of 100 bananas, while the subtotal still uses the old quantity. Expected: digits only, normalized ("05" → 5), clamped to the limits, invalid input rejected with a message.

   Reveal answer✓ I found this
3. 3

   Hint: Tap + on bananas four times quickly, wait two seconds, then compare the field with "Subtotal (N items)".

   Rapid taps: the order is for a different quantity than shown

   Every tap sends a request, and later requests are answered faster, so the replies arrive in reverse order. The subtotal uses the last reply that arrived, which is for an older quantity: the field says 6, the subtotal is for 3. The user pays for something other than what they see. Expected: debounce taps and send one absolute value, ignore stale replies, and show the server-confirmed quantity.

   Reveal answer✓ I found this
4. 4

   Hint: Bring the sourdough to 1 and press − once more.

   − at 1 removes the item with no confirmation or undo

   The item disappears immediately and a DELETE is sent. One accidental tap loses the item, and there's no way back except finding it in the shop again. Expected: at 1 the − becomes a trash icon (so removing is deliberate), or there is a confirmation or an Undo snackbar.

   Reveal answer✓ I found this
5. 5

   Hint: Turn on the screen reader captions, Tab to a − or + button, then press Enter.

   Screen reader hears only "button" and never the new value

   The − and + buttons are icon-only with no accessible name, so VoiceOver says just "button". After pressing them, nothing is announced, so a blind user doesn't know the quantity changed or what it is now. Expected: names like "Decrease quantity of Organic bananas", and the new value announced ("Quantity 3"), for example via role="spinbutton" with aria-valuenow or a live region.

   Reveal answer✓ I found this
6. 6

   Hint: Click into a quantity field, keep the mouse over it and scroll the page with the wheel.

   Mouse wheel changes the quantity while scrolling

   Each wheel notch changes the quantity (and sends a request) while the page scrolls on. Users who click the field and then scroll silently end up with 7 bananas. This mimics the native <input type="number"> behavior in Chromium browsers. Expected: the wheel scrolls the page and never changes the value (blur on wheel, or use type="text" inputmode="numeric").

   Reveal answer✓ I found this

How to test it

Checklist

Stepper test checklist

0 of 13 checked

Copy

• The default value is sensible (1 item, 2 guests) and the label says what is being counted
• − is disabled (or becomes "remove") at the minimum; + is disabled at the maximum, with a hint why
• Limits from the server (stock, max per order) are respected before the request, not only after
• The value always lands on a valid step (packs of 6, 0.5 kg)
• Typed values: digits only, leading zeros, empty field, "e", negative and huge numbers are handled
• Long-press repeats, stops at the limit, and stops immediately on release
• Going below the minimum (e.g. − at 1 in a cart) asks, offers undo, or uses a clear trash icon
• Rapid taps on a slow network end with the same quantity on screen, in the total and after reload
• Totals, badges and "N items" update together with the stepper
• Buttons are at least 44×44 pt (iOS) / 48×48 dp (Android) and not too close together
• Web: the mouse wheel doesn't change a number field while scrolling the page
• Keyboard: Tab reaches the control; arrows (and Home/End) change an editable value; focus ring visible
• Screen reader: buttons have names ("Increase quantity") and the new value is announced

Example test cases

Accessibility

A stepper is two tiny icon buttons and a number. For screen reader users, all three need words.

Key (web, editable value)	What it should do
↑ / ↓	Increase / decrease by one step
Page Up / Page Down	Bigger step (optional)
Home / End	Jump to min / max (if they exist)
Typing digits	Sets the value directly

• The ARIAARIAHTML attributes that tell assistive technology what custom elements are and what state they're in.Open in glossary → spinbutton pattern: the value has a name (“Quantity of Oat milk”) and, when the number needs a unit, a text value: “2 guests”, “30 minutes”.
  Dev note

  The value is an element with role="spinbutton" (a native <input type="number"> has it already), with aria-valuenow, aria-valuemin and aria-valuemax. Add aria-valuetext for the unit.
• Named buttons: “Increase quantity” / “Decrease quantity”, ideally with the product name. Icon-only buttons with no name are read as “button”.
• Announce the new value after each press. With a spinbutton that has focus, screen readers do this automatically; when the focus stays on the + button, use a polite live region.
• Disabled at the limits: keyboard focus must not be lost when + becomes disabled under your finger.
  Dev note

  Use aria-disabled (or keep focus somewhere sensible).
• Touch targetsTouch targetThe area of the screen that responds to a tap, which should be large enough for a finger.Open in glossary →: each button needs at least 44×44 pt (iOS) / 48×48 dp (Android), with enough space between − and +. On the web, WCAG 2.5.8 (AA) asks for at least 24×24 CSS px; 44×44 px (2.5.5, AAA) is the comfortable target.
• On iOS, VoiceOver reads the native stepper’s two halves as buttons (“Increment”, “Decrement” by default). Make sure the label with the value next to it is announced too, or give the stepper a meaningful accessibility value.
  Dev note

  That’s UIStepper.

Mobile vs web

iOSAndroidWeb

• Ask about the limits, the step, long-press repeat (on by default) and wrapping (going past max back to min, off by default).
  Dev note

  Native: UIStepper (UIKit) or Stepper (SwiftUI). Properties: minimumValue, maximumValue, stepValue, autorepeat and wraps.
• The native stepper shows no number itself. Check the label next to it updates on every change, including during long-press.
• Cart steppers in shopping apps are almost always custom. Test them like a web component.
• Test with VoiceOver, Dynamic Type (the number must not be cut off: “10” vs “1”) and external keyboards on iPad.

• No Material stepper: apps build their own. Ask how limits, long-press and disabled states were built.
  Dev note

  Apps combine IconButtons with a Text (Compose) or views.
• NumberPicker is a different control: a scrolling wheel. It’s still used for timers and old-style forms.
• Test TalkBack names (an icon button without a description is read as “Button” or “Unlabelled”), font scale, and configuration changes: rotate the phone and check the quantity survives.
  Dev note

  An ImageButton without contentDescription.
• Watch rapid taps on slow networks: the same race conditions apply.

• <input type="number">: free arrows and keyboard support, but “e” is allowed, the wheel can change it in Chromium browsers, invalid input reads as empty, and min/max/step are not enforced on their own.
• Mobile browsers show the numeric keyboard only with the right type or inputmode. Check it on iOS Safari and Chrome on Android.
• Custom steppers: check keyboard support, focus after + becomes disabled, and the requests in DevToolsDevToolsDeveloper tools built into browsers for inspecting pages, network traffic and errors.Open in glossary → (one per tap? debounced? what does the server answer?).
• Open the cart in two tabs, change the quantity in one, reload the other: which value wins?

Related pages: the cart math around the stepper (totals, discounts, tax) is in Shopping cart & checkout, limits are a perfect case for boundary value analysis, and for rough values a slider may be the better control.

Check your understanding

Quick quiz

0/5 answered · 0 correct

1. 1.A product has 4 items in stock. The cart quantity is 4. What should the + button do?

   AIncrease to 5 and let the server decideBBe disabled, with a hint like "Max 4"CReset the quantity to 1DDisappear completely

2. 2.Which of these can a user type into a native <input type="number"> without the browser blocking it?

   AOnly digitsB1e2CNothing, it only has arrowsDOnly values between min and max

3. 3.After tapping + quickly five times, the field shows 7 but the order total is for 4. What is the most likely cause?

   AA rounding errorBOut-of-order network responses (a race condition)CA wrong price in the databaseDThe stepper step size is 2

4. 4.What is the best behavior when the user presses − on a cart item with quantity 1?

   ARemove it silentlyBDo nothing and give no feedbackCRemove with a clear trash icon, confirmation or UndoDSet the quantity to 0 and keep it in the cart

5. 5.A screen reader says only "button" on the + of a quantity stepper. What is missing?

   AA bigger iconBAn accessible name like "Increase quantity"CA different colorDHaptic feedback

Key takeaways

• A stepper changes a small exact number by a fixed step between a min and a max. For large values, let users type.
• At the limits, the matching button is disabled with a reason. Server limits like stock belong in the UI before the request.
• Typed values need validation: “05”, “1e2”, “-3” and empty. The web’s <input type="number"> allows “e” and can change on mouse wheel.
• Rapid taps + network = race conditions: debounce, send absolute values, ignore stale replies, and check that screen, total and server agree.
• Going below the minimum (removing an item) needs confirmation or undo, and screen readers need named buttons and the new value announced.