Number Field
Numeric input with increment/decrement buttons and min/max constraints.
Installation
npx shadcn@latest add https://ui.edbn.me/r/number-field.jsonManual
API Reference
Root
Groups all parts of the number field. Renders a div element.
defaultValuenumber | nullnullInitial value
valuenumber | nullControlled value
onValueChangefunctionCalled when value changes
minnumber-InfinityMinimum value
maxnumberInfinityMaximum value
stepnumber1Step increment
smallStepnumberStep for Shift+Arrow
largeStepnumberStep for Page Up/Down
disabledbooleanfalseDisable number field
readOnlybooleanfalseRead-only state
requiredbooleanfalseRequired field
allowWheelScrubbooleanfalseAllow mouse wheel to change value
formatIntl.NumberFormatOptionsNumber formatting options
classNamestring | functionCSS class name
renderReactElement | functionCustom render function
Input
The text input for the number field. Renders an input element.
classNamestring | functionCSS class name
renderReactElement | functionCustom render function
Increment
A button that increments the value. Renders a button element.
nativeButtonbooleantrueRender as native button
classNamestring | functionCSS class name
renderReactElement | functionCustom render function
| Attribute | Description |
|---|---|
| data-disabled | Present when button is disabled |
Decrement
A button that decrements the value. Renders a button element.
nativeButtonbooleantrueRender as native button
classNamestring | functionCSS class name
renderReactElement | functionCustom render function
| Attribute | Description |
|---|---|
| data-disabled | Present when button is disabled |
ScrubArea
An area that changes the value via click-and-drag. Renders a div element.
direction'horizontal' | 'vertical''horizontal'Scrub direction
pixelsPerScrubnumber2Pixels per scrub step
teleportDistancenumber | nullnullTeleport cursor distance
classNamestring | functionCSS class name
renderReactElement | functionCustom render function