Number Input

Default

Quantity

Quantity must be at least 1.

npx visor add number-input

This copies two files into your project:

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

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

Same props, same treatment as Input: a currency symbol before the value, a unit after it, inside the same well as the steppers.

Prop	Type	Default	Description
`value`	`number`	—	Controlled numeric value.
`defaultValue`	`number`	—	Default value for uncontrolled usage.
`onChange`	`(value: number \| undefined) => void`	—	Callback when the value changes.
`min`	`number`	—	Minimum allowed value.
`max`	`number`	—	Maximum allowed value.
`step`	`number`	`1`	Increment/decrement step size.
`disabled`	`boolean`	`false`	Disables the number input and buttons.

Always provide an aria-label or pair with a <Label> using htmlFor/id — the component has no visible label by default
Increment/decrement buttons have aria-label="Increment" and aria-label="Decrement"
The input renders as type="text" with inputmode="numeric" for appropriate mobile keyboard
Keyboard: Up/Down arrow keys increment/decrement the value; Tab navigates between the input and buttons
min/max bounds are enforced both visually (buttons disable at bounds) and on input blur