Stepper
UI ComponentsA control that allows users to incrementally increase or decrease a numeric value using plus/minus buttons, with an optional text input for direct entry.
Visual Examples
Example 1
Example 2
Example 3
Visual examples for Stepper coming soon.
How It Works in Apps/Websites
Steppers provide controlled numeric input with increment/decrement buttons. Users click +/- buttons to adjust the value by a set step amount. Often includes a text field showing the current value that can be edited directly. Useful when small adjustments are common and the range is limited.
How AI Interprets This Term
When you say 'stepper', AI expects: a horizontal component with minus button on left, number display or input in center, plus button on right. Buttons are usually squares or circles with - and + icons. Height ~40px, total width ~120px. May have min/max boundaries.
Prompt Examples
Copy-paste these prompts to use in your AI tools.
Create a quantity stepper with plus and minus buttons
Design a quantity stepper for e-commerce: minus button (square, gray), number input (40px wide, centered text), plus button (square, gray). Min value 1, max 99. Disabled state when at limits. Include subtle animation on value change.
Show a compact stepper vs an expanded stepper with larger touch targets for mobile
Compare With
Related or contrasting terms to help you understand the differences.
Variants & States
Variants
States
Usage Guidelines
When to Use
- •Quantity selection (shopping cart)
- •Small number adjustments
- •When exact numbers matter
- •Limited numeric ranges
When NOT to Use
- •Large ranges (use slider)
- •Free-form numbers (use text input)
- •Non-numeric values
Related Terms
Slider
An input control that allows users to select a value from a range by dragging a thumb along a horizontal track.
Text Input
A single-line form field that allows users to enter and edit text, such as names, emails, or search queries.