Quantity stepper UX: the number needs context

Arpit Sharma — Tue, 15 Sep 2026 19:25:44 +0000

Tira’s shopping bag shows two products with a quantity of one. The free wipes get a small “Qty: 1” label. The face wash gets minus and plus buttons.

Both numbers say the same thing. Only one is presented as something to edit.

That detail is a useful starting point for quantity stepper UX. Before deciding how the buttons should look, decide what the number represents and what the customer can do with it. Three screens from Flownato’s reference library make that question concrete.

Tira: a quantity can be information

The free item and the face wash use different quantity treatments in the same bag.

The wipes sit in a compact grey row, labelled “FREE,” with “Qty: 1” aligned to the right. There are no adjustment buttons in that row. Below it, the face wash has a much larger product area and an explicit minus–one–plus control beside its price.

The distinction keeps the free item visible without presenting it as another thing to configure. The paid item gets the editing controls.

I’d keep that distinction in a component library. A quantity field needs a display-only treatment as well as an editable one. Otherwise, a team can end up adding disabled buttons around a value simply because the component always renders them.

Bigbasket: “1” and “1 kg” do different jobs

The basket item has a count; the recommendations below it have an add action.

The banana row contains two measurements: “1 kg” beneath the product name and “1” inside the green stepper. The first describes the pack. The second sits between the controls for changing how many are in the basket.

That separation matters. Put the weight inside the stepper and you can suggest that the customer is choosing a custom weight. Here, the pack size stays with the product details, while the count sits in its own control.

There is another useful contrast lower down. The recommended coriander and carrots have single outlined plus buttons. They don’t show a zero between two controls. The basket item above has the full minus–count–plus treatment.

The outlined plus offers an item to add. The filled green stepper marks the item already in the basket. Both use green, so the shape and the presence of a count do much of the work.

For a grocery interface, I’d write the unit into the design spec alongside the component: packs, bottles or individual items. A bare integer is easy to misunderstand when the product also has a weight or volume.

Domino’s: the count sits beside the chosen variant

The quantity control belongs to the product card; “View Cart” is a separate action below.

The pizza card places its quantity control at the bottom right. To the left are the price and “Medium | New Hand Tossed,” followed by a chevron. Below the card, a separate navigation bar contains a bright “View Cart” button.

The count has a clear local context: this pizza, in the configuration named beside it. The cart action has a different visual treatment and sits outside that card.

The tradeoff is space. The product description above is truncated, while the price, variant and quantity occupy a compact strip. I’d protect the variant label when adapting this layout to a narrower screen. If that label disappears, the customer can still increase the number without seeing as clearly what they are increasing.

What I’d put in the handoff

Alongside the component, I’d spell out its unit, whether the quantity is editable, and which product variant it changes. Those details are easy to lose when a control is copied out of a full screen and into a design system.

Then I’d ask what happens at one when the customer presses minus. None of these captures demonstrates removal, an error or a stock limit. Those still need their own states in the design.

These are captured app screens, so the observations describe the versions and states shown. We collect references like these in Flownato’s quantity-stepper collection. It has public previews, with the wider collection available through Premium.

DEV Community: Flownato

Quantity stepper UX: the number needs context

Tira: a quantity can be information

Bigbasket: “1” and “1 kg” do different jobs

Domino’s: the count sits beside the chosen variant

What I’d put in the handoff