Numeric Stepper - Input

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

Overview

The purpose of numeric steppers with an input field is to provide users with flexibility in inputting numeric values.

Numeric steppers [input] include a text input field, allowing for precise value entry through the text input while also offering the convenience of incremental adjustments using the provided buttons.

A numeric stepper with an input 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