Stepper

Collect an integer value within a predefined range. Supports click/touch, keyboard manipulation, and directly typing the desired number.

Basic usage with min max value

Usage with fixed range

Usage with custom increments

By using the onIncrement-prop, you may customize the increments as you like. Here we first always round up to the nearest whole number, before incrementing with 10, 100, 1000, depending on the number itself.

Alignment

The stepper can be aligned to the left, right or center. The default is center.

Under we have aligned the stepper to the left (align='left'):