Quantity Stepper
Quantity Stepper
Circular +/- buttons for quantity selection — a staple of e-commerce cart UIs. Supports min/max bounds, three sizes, and a destructive trash-icon mode at minimum value.
Basic
Use two-way binding with bind-Value. The stepper enforces Min=1 by default and has no upper limit.
1
Value: 1Min / Max Bounds
Set Min and Max to constrain the range. The + button is disabled at Max and the − button at Min.
1
1 – 10, value: 1Destructive At Min
DestructiveAtMin=true replaces the − button with a trash icon when the value reaches Min. Pressing it fires OnDestructiveClick instead of decrementing — ideal for "remove from cart" UX.
1
Qty: 1Sizes
Three sizes: Small (28 px buttons), Default (32 px), and Large (44 px).
1
Small
2
Default
1
LargeDisabled
Disabled=true disables both buttons and the count display.
3
API Reference
QuantityStepper parameters.
| Prop | Type | Default | Description |
|---|---|---|---|
| Value | int | 1 | Current quantity value. |
| ValueChanged | EventCallback<int> | — | Fires when the value changes. Use @bind-Value for two-way binding. |
| Min | int | 1 | Minimum allowed value. Decrement button is disabled at Min. |
| Max | int? | — | Maximum allowed value. Increment button is disabled at Max. Null means no upper limit. |
| DestructiveAtMin | bool | false | Replace the − button with a trash icon at Min, firing OnDestructiveClick instead. |
| OnDestructiveClick | EventCallback | — | Fires when the trash button is pressed (only when DestructiveAtMin is true and value is at Min). |
| Size | QuantityStepperSize | Default | Button size: Small (28 px), Default (32 px), or Large (44 px). |
| Disabled | bool | false | Disables the entire stepper. |
| AriaLabel | string | "Quantity" | Accessible label for the control group. |
| Class | string? | — | Additional CSS classes on the wrapper. |