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

We’re currently working on updating our Numeric Stepper Form documentation, please see the resources below.

Figma Web Component	Stable
Figma Web Documentation	Stable
Figma App Component	Stable
Figma App 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