Reference
an-stepper
Plus and minus around a number — and the one primitive Android has to assemble, out of Material's own parts.
UIStepper on iOS, NSStepper on the Mac, a SwiftUI Stepper on the watch.
On Android it is assembled, and it says so. Material 3 defines no stepper, so this one is two Material icon buttons and a Material label — system views, put together, rather than a control drawn to look like one. That is the line this project draws: assembling out of the platform’s parts is allowed, imitating the platform’s drawing is not.
Availability
Section titled “Availability”| iOS · iPadOS | Android | macOS | tvOS | visionOS | watchOS | Wear OS |
|---|---|---|---|---|---|---|
| ✓ | ✓ | ✓ | — | ✓ | ✓ | ✓ |
What it becomes
Section titled “What it becomes”| iOS · iPadOS | Android | macOS | watchOS |
|---|---|---|---|
UIStepper |
two icon buttons | NSStepper |
Stepper |
Inputs
Section titled “Inputs”| Prop | Type | Default | |
|---|---|---|---|
value |
number | null |
0 |
|
minimumValue |
number | null |
0 |
|
maximumValue |
number | null |
100 |
|
step |
number | null |
1 |
How much each tap goes up or down. One by default. |
Outputs
Section titled “Outputs”| Output | Payload | |
|---|---|---|
(change) |
{ value: number } |
Example
Section titled “Example”<an-stepper [value]="quantity()" [minimumValue]="1" [maximumValue]="10" [step]="1" (change)="quantity.set($event.value)" />Every primitive also carries the base props — background, border, opacity, the transforms, animate, the accessibility contract — and every gesture. See Components for the full base, Events for the payloads.