UI Components Input & Selection Stepper Form Cell

Updated: November 18, 2023

Stepper Form Cell

FUIStepperFormCell

Intro

A stepper is a control that displays and allows users to incrementally increase or decrease a select value.

Stepper examples
Stepper examples

Anatomy

A. Label

Describes the intent or desired value of the stepper form cell.

B. Hint 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
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.

A user can tap on the “+” or “-” control buttons to incrementally increase or decrease the shown value in the stepper container.

Tap the
Tap the "+" or "-" buttons to increase or decrease value

A user can also tap on the value/input field to open up the keyboard and enter an exact value.

Tap the value/input field to trigger keyboard to enter selected value
Tap the value/input field to trigger keyboard to enter selected value
Stepper states (top to bottom) – default, typing, disabled
Stepper states (top to bottom) – default, typing, disabled

Adaptive Design

Compact (left) and popover modal (right)
Compact (left) and popover modal (right)

Resources

Development: FUIStepperFormCell