Number Input

A numeric stepper whose digits roll into place. Hold to repeat, arrow keys, Intl formatting and a polite shake at the bounds.

Inputs

Team seats$12 per seat

Billed monthly

Hold a button to repeat. Arrow keys work too, Shift for steps of 10.

Playground

Tweak the props, the preview and the code follow.

Props

size

format

step1

max20

hideControls

disabled

<NumberInput
  defaultValue={4}
  min={0}
  max={20}
/>

npx @plumsydev/plum-ui add number-input

Also pulls in animated-number automatically.

import { NumberInput } from "@/components/ui/number-input"

<NumberInput defaultValue={3} min={1} max={10} />

Any Intl.NumberFormat options: currency, percent, units.

Monthly budget

Discount

Weight

Replicas

Quantities driving an animated total.

Total

Extends the native input, minus type, value and onChange.

Prop	Type	Default
`value` Controlled value.	`number`	`—`
`defaultValue` Initial value when uncontrolled.	`number`	`0`
`onValueChange` Called with the clamped, step-rounded value.	`(value: number) => void`	`—`
`min / max` Bounds. Hitting them shakes the field.	`number`	`-Infinity / Infinity`
`step` Increment. Shift multiplies by 10 from the keyboard.	`number`	`1`
`format` How the value is displayed when not focused.	`Intl.NumberFormatOptions`	`—`
`size` Height.	`"sm" \| "default" \| "lg"`	`"default"`
`hideControls` Hide the − and + buttons.	`boolean`	`false`
`containerClassName` Classes for the outer wrapper.	`string`	`—`

Exposes role="spinbutton" with aria-valuenow, aria-valuemin and aria-valuemax.
Home and End jump to min and max when they are finite. Typing a value commits on Enter or blur.