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} />;
Drag the left 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,
or icon={false} to render a plain input.
Forward a ref to receive the native input[type=number] 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 by browser steppers, keyboard changes, and drag. |
icon | ReactNode | false | number icon | Left drag handle content. Pass false to disable the handle. |
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 / onInput | ChangeEventHandler | - | Standard number input handlers. event.target.value is a string. |
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.
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.