Numeric Stepper - Form

A numeric stepper [form] is an input element that resembles a text input but lets users adjust numeric values using buttons.

Overview

The purpose of numeric steppers as form fields is to offer users flexibility in inputting numeric values, while maintaining a consistent form field appearance in form interfaces. This allows users to easily enter and adjust numerical data.

Numeric steppers [form] allow a user to enter precise values, either by inputting text or by using the increment or decrement buttons.

A numeric stepper with the controls within an input form.

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