Intro
A stepper is a control that displays and allows users to incrementally increase or decrease a select value.
Stepper examples
Anatomy
A. Label
Describes the intent or desired value of the stepper form cell.
B. Helper Text (Optional)
Provides additional information about the stepper form cell.
C. Stepper Container
Houses the actual stepper component.
D. +/- Buttons
Segmented control buttons for incremental increases or decreases of the shown value.
E. Value/Input Field
Indicated tappable area where input values are displayed.
Stepper anatomy
Behavior and Interaction
Like the object card, the content within the list card and its items are designed to be flexible so as to accommodate different use cases. However, the content used for the list item, which are housed in condensed object cells, should be very concise.
Tap the "+" or "-" buttons to increase or decrease value
Tap the value/input field to trigger keyboard to enter selected value
Stepper states (top to bottom) – default, typing, disabled
Adaptive Design
Stepper form cells are supported in both compact and regular widths.
On iPad, stepper form cells may be displayed inside a popover modal.
Compact (left) and popover modal (right)