Mobile stepper UI examples

Stepper UI examples

Search the library

See the flow
SunSafe: UV Index & Tanning
Minus and plus buttons flank the selected UV alert threshold.
See the flow
Expedia: Hotels, Flights, Cars
Below this, the user can adjust the number of 'Adults' and 'Children' (ages 0 to 17) for 'Room 1' using circular plus and minus buttons.
See the flow
Vivino: Drink The Right Wine
A bottle count sits between minus and plus controls in the cellar sheet.
See the flow
Spoke Route Planner
The package count uses a compact minus/value/plus control beside the stop details.
See the flow
Vrbo Vacation Rentals
Room and bathroom counts use separate circular minus and plus controls.
See the flow
Redfin: Buy, Sell & Rent Homes
Below this, the user can input a location, set price ranges with minimum and maximum dropdowns, and adjust bedroom and bathroom counts using plus and minus buttons.
See the flow
Pick Up Limes
At the bottom, a control panel allows the user to adjust the number of servings (currently set to 5) using plus and minus buttons.
See the flow
FLYP - Fashion Design Studio
Below the image, a bottom-anchored modal titled 'Choose Options' allows the user to select a size from a row of buttons (S, M, L, XL, 2XL, 3XL) and adjust the quantity using a stepper control.
See the flow
Tuner Pro: Guitar Tuner & Tab
Minus and plus controls sit at either end of the metronome tempo scale.
See the flow
Zumba - Dance Fitness Workout
The central component is a horizontal stepper control featuring a minus button, a numerical display currently set to '2', and a plus button, all contained within a light-colored rounded card.
See the flow
Hotels.com: Book hotels & more
Each row features a stepper control with minus and plus buttons flanking the current count.
See the flow
Planner 5D: AI Home Design
The 'Scale' control includes a numerical input field (currently set to 100) with plus and minus buttons, while the 'Rotate' control uses a horizontal slider currently set to 59 degrees.
See the flow
Pick Up Limes
Below this, there are plus and minus buttons with water drop icons to adjust the intake.
See the flow
Vivino: Drink The Right Wine
Below this, there is a quantity selector currently set to '6 bottles' with plus and minus buttons, showing a price of '$59.99 / bottle' and a total of '$359.94'.
See the flow
Spoke Route Planner
A package-count stepper sits beside the Packages label above the keyboard.
See the flow
Redfin: Buy, Sell & Rent Homes
The main content area includes a location input field with a pre-filled 'South New York' tag, followed by price range selectors ('No min' to 'No max'), and stepper controls for 'Beds' and 'Baths' with minus and plus buttons.
See the flow
Vrbo Vacation Rentals
The background shows a dark-themed form with 'Adults' and 'Children' counters, each featuring plus and minus buttons.
See the flow
Planner 5D: AI Home Design
The panel includes input fields with increment/decrement buttons for Height, Width, Depth, and 'Above the floor' measurements, as well as a slider for rotation.
See the flow
Pick Up Limes
At the very bottom, there is a serving size adjustment tool (currently set to 6) with plus and minus buttons, alongside a row of allergen/dietary icons (soy, gluten, peanut, treenut).
See the flow
Redfin: Buy, Sell & Rent Homes
These include dropdown menus for 'Stories' (min/max), a dropdown for 'Pool', and a stepper control for 'Garage Spots' with plus and minus buttons.

Found an example you like?See the whole story.

See the full library See plans