Steppers

The Stepper allow users to make a selection from a range of values.

Use steppers for a full-screen control experience that allows users to make a selection from a range of values.

Anatomy

A. Increase button
B. Label or chip
C. Decrease button

Usage

See the following examples of how to use steppers.

Check out the Horologist library on GitHub that offers an implementation of a volume control screen.

Adaptive layouts

Responsive behavior

The stepper component fills available height and width, therefore the gap between elements is determined by the screen size and the available height.