Quantity Stepper
InputIncrement / decrement quantity control with min/max clamping and keyboard support.
Quantity StepperInput · Web
Loading Storybook preview…
Installation
bun add @otfdashkit/ui
Usage
Import QuantityStepper from @otfdashkit/ui.
Code
// Quantity Stepper — Increment / decrement quantity control with min/max clamping and keyboard support.
//
// Install:
// bun add @otfdashkit/ui
import { QuantityStepper } from '@otfdashkit/ui'
export function Example() {
return (
<QuantityStepper>
{/* your content */}
</QuantityStepper>
)
}Props
Props declared in the QuantityStepper source. Inherited HTML attributes are not listed.
| Prop | Type | Default | Description |
|---|---|---|---|
| aria-label | string | 'Quantity' | |
| defaultValue | number | (readonly string[] & number) | 1 | Uncontrolled initial quantity. Default 1. |
| disabled | boolean | false | |
| max | number | 99 | Maximum (increment disables here). Default 99. |
| min | number | 1 | Minimum (decrement disables here). Default 1. |
| onValueChange | (value: number) => void | Fires with the clamped next quantity. | |
| size | 'sm' | 'md' | 'md' | Control size. Default 'md'. |
| step | number | 1 | Increment/decrement step. Default 1. |
| value | number | Controlled quantity. |