Inputs

NumberInput

A text input for numeric values with increment/decrement stepper buttons, min/max/step clamping, and full keyboard support.

NumberInput

Preview

Quantity

Usage

tsx

import { NumberInput, Label } from "@vesture/react";

function Example() {
  const [quantity, setQuantity] = useState(1);
  return (
    <>
      <Label htmlFor="qty">Quantity</Label>
      <NumberInput id="qty" value={quantity} onChange={setQuantity} min={0} max={10} />
    </>
  );
}

Behavior

role="spinbutton" with aria-valuenow/min/max kept in sync.
ArrowUp/ArrowDown step by step; Home/End jump to min/max when set.
Typed text is only committed on blur or Enter, and reverts to the last valid value if unparsable.
Stepper buttons disable themselves once the value hits min or max.

Props

Prop	Type	Default	Description
value / defaultValue / onChange	number \| null	—	Controlled / uncontrolled numeric value.
min / max	number	—	Clamps typed input, arrow keys, and the stepper buttons.
step	number	1	Increment used by ArrowUp/ArrowDown and the stepper buttons.
invalid	boolean	—	Sets aria-invalid and switches to error styling.
disabled	boolean	—	Disables the input and both stepper buttons.