Tally UI

QuantityStepper

Increment/decrement control for adjusting item quantities

Import

import { QuantityStepper } from '@tallyui/components';

Usage

<QuantityStepper defaultQuantity={1} onChangeQuantity={(qty) => console.log(qty)} />

A compact stepper with minus and plus buttons flanking a numeric display. Supports both controlled and uncontrolled modes.

Props

PropTypeDefaultDescription
defaultQuantitynumber1Initial quantity in uncontrolled mode
quantitynumberControlled quantity value
onChangeQuantity(quantity: number) => voidCallback when quantity changes
minnumber1Minimum allowed quantity
maxnumber999Maximum allowed quantity
classNamestringOverride container styles

Live demo

On this page