Quantity: 12
Installation
Add the Number Input component with one command:
pnpx shadcn@latest add https://blog.skxv.dev/r/number-input.jsonUsage
import { NumberInput } from "@/components/registry/number-input";
<NumberInput min={0} max={100} defaultValue={50} />;
The input renders as type="text" with a numeric pattern. Drag the icon up or
down to change the value. Use dragAxis="horizontal" to change values by
dragging left or right.
Pass icon to customize the handle, iconPosition="right" to move it, or
icon={false} to render a plain input. Use hideIcon to keep the drag
activation area while hiding the icon.
Use prefix or suffix to make values literal text like $400 or 30% inside
the input. Change events receive the stripped numeric value directly, so 400
or 30. Empty or incomplete input emits null. Prefixes and suffixes are hidden
while the input is focused and applied again on blur. A leading - is allowed
while editing, so values like -70 can be typed manually. Valid typed numbers
are clamped to min and max.
Forward a ref to receive the native input element for forms and imperative access.
API Reference
Extends InputHTMLAttributes<HTMLInputElement> except type.
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | string | - | Controlled value. Pair with onChange. |
defaultValue | number | string | - | Initial value when uncontrolled. |
min | number | string | - | Minimum accepted value. |
max | number | string | - | Maximum accepted value. |
step | number | string | - | Increment used while dragging. |
icon | ReactNode | false | number icon | Left drag handle content. Pass false to disable the handle. |
iconPosition | "left" | "right" | "left" | Side used for the drag handle. |
hideIcon | boolean | false | Hides the icon but keeps the drag activation area. |
prefix | string | "" | String shown before the numeric value inside the input. |
suffix | string | "" | String shown after the numeric value inside the input. |
dragAxis | "vertical" | "horizontal" | "vertical" | Direction used for drag-to-change. |
dragSensitivity | number | 0.35 | Multiplier for how quickly dragging changes the value. |
disabled | boolean | false | Disables interaction. |
readOnly | boolean | false | Prevents edits while keeping the input focusable. |
onChange | (value: number | null) => void | - | Receives the numeric value, or null when empty or incomplete. |
onInput | FormEventHandler | - | Native input event handler. |
className / style | string / CSSProperties | - | Applied to the input element. |
Examples
Default
Uncontrolled number input with browser number behavior and draggable handle.
Controlled
Use value and onChange for controlled state.
Horizontal Drag
Use dragAxis="horizontal" to change values by dragging left or right.
Right Icon
Use iconPosition="right" to move the drag handle to the right side.
Hidden Icon
Use hideIcon to keep the drag area without showing the icon.
Prefix & Suffix
Use prefix and suffix for literal input text while onChange receives a
number.
Min & Max
Pass min, max, and step for browser-level numeric constraints.
Disabled
Use disabled to disable the input.
Read Only
Use readOnly to prevent edits without removing focus styles.