NumberStepper

Counter with minus/plus buttons and a typeable value; ArrowUp/ArrowDown step it, Home/End jump.

Import

import { NumberStepper } from "@jcsoftdev/ui/forms";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/forms/number-stepper.

Usage

<NumberStepper
  defaultValue={2}
  min={0}
  max={10}
  step={1}
  aria-label="Cantidad de productos"
/>

Props

Prop	Type	Default	Description
value	number
defaultValue	number	0
onValueChange	((value: number) => void)
min	number	Number.NEGATIVE_INFINITY
max	number	Number.POSITIVE_INFINITY
step	number	1
disabled	boolean
unit	string		Text after the number, e.g. “min” or “unid.”; read by screen readers through aria-valuetext.
name	string
aria-label	string
aria-labelledby	string
className	string

* marks a required prop.

Storybook stories

• Default
• With Unit
• Decimals
• Disabled
• Controlled Value
• Narrow
• Brutal Preset
• In Shrink Wrap Row

Source

packages/ui/src/forms/number-stepper/number-stepper.tsx