Number Input
FormsA numeric input with increment and decrement controls. Use for quantity selectors, counters, or any numeric input with bounded values.
Import
import { NumberInput } from "@/components/ui/number-input";Usage
Quantity Selector
Common use case for product quantities
With Step
Number input with custom step increment
Without Controls
Just the numeric input without buttons
Disabled
Number input in disabled state
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | — | Controlled value |
defaultValue | number | 0 | Default value (uncontrolled) |
min | number | -Infinity | Minimum allowed value |
max | number | Infinity | Maximum allowed value |
step | number | 1 | Increment/decrement step |
label | string | — | Label text displayed above the input |
error | string | — | Error message to display |
hideControls | boolean | false | Hide increment/decrement buttons |
onValueChange | (value: number) => void | — | Handler called when value changes |
disabled | boolean | false | Whether the input is disabled |