Controls / The visual dictionary

Stepper.

Increases or decreases a value in defined increments.

Also callednumeric stepperspinbuttonincrement decrement
01

See it in context

UI illustration
Quantity
2

A stepper provides paired increment and decrement controls around a numeric value. It suits small quantities where moving one unit at a time is more convenient than typing.

When to use it

Show the current number, use meaningful increments, and respect minimum and maximum values.

Know the difference

A navigation stepper shows stages of a process; this numeric stepper changes a quantity.

WebiOSiPadOSAndroidmacOSWindowsLinux

Web

Use a native button for an action and an anchor for navigation. Preserve keyboard activation and a visible focus indicator.

iOS · iPadOS · Android

Provide a comfortable touch target, use familiar system symbols when appropriate, and show a clear pressed or selected state.

macOS · Windows · Linux

Keep pointer, keyboard, and focus behavior consistent. Common commands can additionally expose a menu item or keyboard shortcut.

Primary documentation for the pattern and its platform conventions.