Quantity Stepper
An integer quantity control for carts and order forms: a decrease button, a numeric input and an increase button inside a labelled group, with 44px touch targets.
Default
Min and Max are inclusive, and both the buttons and the arrow keys clamp to them. The increase button disables itself at Max and the decrease button at Min, so the bounds are visible rather than only enforced.Remove at the Minimum
Set
OnRemove and the decrease button turns into a trash-icon remove action once the quantity reaches Min — the cart pattern where stepping below one deletes the line. The value does not change; your code removes the item.Step, Disabled and Read-Only
Step must be greater than zero and applies to the buttons and the arrow keys alike — useful for case quantities. Disabled turns off the whole group; ReadOnly swaps the numeric input for a plain read-only one that stays focusable so the value can still be read out.Inside an EditForm
With
@bind-Value the stepper notifies the EditContext on every button press and typed change, so DataAnnotations rules such as [Range] report through ValidationMessage. The inner numeric input also sets aria-invalid when the field has messages.