Your bookmarks

Stepper

Enables incremental changes of a counter without a direct input.

Steppers come in handy for letting users change small amounts of something in a separate context. When you have popovers or other places you need people to choose specific values, use a Stepper to give them simple and clear interactions.

Component status

Figma
Released
Web (React)
Released
iOS (Swift)
n/a
Android (Kotlin)
n/a
Sketch
Released

Component structure

Value: displays the current value; decrement controller: decreases the value and to improve accessibility it's best to add a title describing the action; increment controller: increases the value and to improve accessibility it's best to add a title describing the action.