Input Stepper

A numeric increment/decrement control. Holding either button repeats with acceleration (400ms initial delay, then speeding up).

Usage


import { InputStepper } from '@mav-labs-inc/mavkit-react'
 
<InputStepper value={qty} min={0} max={10} onValueChange={setQty} />
<InputStepper defaultValue={40} suffix="%" onValueChange={onChange} />

Examples

Variants

40%

Zones

zones renders a filled progress bar under a variant="dynamic" stepper, with an optional label for whichever zone the current value falls in.

40%

Medium

Props

Prop	Type	Default	Description
value	number	—	Controlled value — pair with onValueChange.
defaultValue	number	0
onValueChange	(value: number) => void	—
min	number	-Infinity
max	number	Infinity
step	number	1
decimals	number	0	Decimal places to round to.
suffix	string	—	e.g. '%'.
disabled	boolean	false
variant	'segmented' \| 'ghost' \| 'dynamic'	'segmented'
compact	boolean	false
zones	{ min: number; max: number; id?: string; label?: string }[]	—	Renders a filled zone bar (dynamic variant) with an optional label for the active zone.
format	(value: number) => string	—	Custom value formatter, overriding suffix.
decLabel	string	'Decrease'	aria-label for the decrement button.
incLabel	string	'Increase'	aria-label for the increment button.
className	string	—