Intro
A stepper form cell is a control that displays and allows users to incrementally increase or decrease a select value.
Stepper form cell on compact screen (left) and expanded screen (right)
Usage
Do
Use the stepper form cell when a user needs to increase or decrease a value within a form where the value range is narrower.
Don't
Don’t use the stepper form cell when a user needs to input a continuous range of values or if the user’s workflow is nonlinear, where a form may not be as effective.
- Ensure the stepper form cell label clearly represents the value, so the user understands what they are modifying.
- Ensure the defined increment to increase or decrease the value aligns with the use case.
- The value increment, which determines how much it increases or decreases, can be customized beyond the default of one. Decimal values are supported, but negative increments are not allowed.
- Ensure accessibility labels are tailored to the defined increment and use case.
Anatomy
A. Label
The label describes the intent or relationship to the stepper control.
B. Helper Text (Optional)
The helper text provides additional information about the stepper form cell to help give users more context.
C. Stepper Container
The stepper container holds the +/- buttons and the value input field.
D. +/- Buttons
The +/- buttons are interactive elements in which users can decrease or increase the value by a defined increment.
E. Value Input Field
The value input field displays the current value and allows users to manually type in their desired value.
Anatomy of a stepper form cell
Behavior and Interaction
Tapping on the +/- Buttons
A user can tap on the “+” or “-” control buttons to incrementally increase or decrease the stepper form cell value.
Increasing the value by tapping the “+” button
Tapping on the Value Input Field
A user can tap on the value input field to open the keyboard and enter an exact value. If the user types a value that exceeds the defined minimum or maximum value, an error message appears.
Invoking the keyboard by tapping the value input field
Stepper Form Cell States
The stepper form cell has the following states:
- Enabled
- Active/Typing
- Read Only
- Disabled
- Minimum Value Reached
- Maximum Value Reached
- Error
Stepper form cell states from top to bottom: enabled, typing, read only, disabled, minimum value reached, maximum value reached, error
Variations
Horizontal and Vertical Layouts
The stepper form cell can have a vertical or horizontal layout. We recommend using a consistent stepper form cell layout across the application.
Stepper form cell horizontal layout (top) and vertical layout (bottom)
Adaptive Design
The stepper form cell is supported in compact, medium, and expanded device sizes. The stepper form cell can be configured to either stretch the full available container width or hug to contents.
Stepper form cell container that expands the full width (left) and hugs to contents (right)