Numeric Stepper

A numeric stepper is an input element that lets users adjust numeric values using buttons.

Overview

The purpose of numeric steppers is to facilitate accurate and efficient input of numeric values, especially within predefined limits or step sizes. They help prevent input errors and offer a more convenient user experience by providing a visual and interactive way to adjust numerical data.

Numeric steppers are commonly used in forms, data entry fields, or settings panels where precise numeric input is required. They provide an intuitive and accessible means for users to input or adjust values without the need for manual typing.

A numeric stepper with a text counter between the controls.

Resources

Figma Component	Stable
Figma Documentation	Stable
Web Components	Planned
Vue [Fozzie]	N/A
React [Snacks]	Stable
iOS JustUI [UI Kit]	N/A
iOS PIE [SwiftUI]	N/A
Android PIE [Compose & Views]	TBC