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
value—numberControlled value
defaultValue0numberDefault value (uncontrolled)
min-InfinitynumberMinimum allowed value
maxInfinitynumberMaximum allowed value
step1numberIncrement/decrement step
label—stringLabel text displayed above the input
error—stringError message to display
hideControlsfalsebooleanHide increment/decrement buttons
onValueChange—(value: number) => voidHandler called when value changes
disabledfalsebooleanWhether the input is disabled
| 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 |