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 context-specific to give users a complete experience.
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 controls that provide users with the ability to incrementally adjust a value: the default increment is 1, and it can be configured for any whole or decimal amount.
E. Value Input Field
The value input field displays the current value and allows users to manually type in their desired value. The default starting value is configurable.
Anatomy of a stepper form cell
Behavior and Interaction
Tapping on the +/- Buttons
Tapping the '+' or '-' buttons incrementally adjusts the value. If the new value reaches the minimum or maximum limit, the corresponding button becomes disabled.
Increasing the value by tapping the “+” button
Tapping on the Value Input Field
A user can tap 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
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)
Accessibility
Default Roles and Labels
The subcomponents of a stepper form cell include icon buttons assigned the button role and an input field assigned the edit box role. Screen readers should announce information based on these roles, using the labels indicated below.
A. "-” Icon
Role: Button
Label: “Decrease value by one”
B. Value Input Field
Role: Edit Box
Label: “# (Stepper current value)”
C. "+” Icon
Role: Button
Label: “Increase value by one”
Stepper form cell SDK default roles and labels
Value Update Announcement
By default, an announcement confirms the value change immediately after the user performs the action.
If the button becomes disabled after the value changes, an additional announcement appears, stating "Reached minimum/maximum value" along with the corresponding icon.
Stepper form cell SDK default value update announcement
Label Customization
Default accessibility labels can be customized for each use case by editing the icon button's invisible labels. This provides context for users and improves wording for a more natural flow.
A. "-” Icon
Role: Button
Custom Label: “Remove one attendee”
B. "+” Icon
Role: Button
Custom Label: “Add one attendee”
C. Value Update Announcement
Role: Button
Custom Label: “Attendees set to two”