Number Input Components

Dev Design Library indexes 51 number input components from 33 open-source UI libraries, with the most coming from ReUI, Toolcraft, UI Lab, React Spectrum and Kinetics. Each one links to its page with the source code, a live preview where available, the library license and the install command. Number input components belong to the Inputs group.

• Scrub FieldReact Bits · ReactNumber chip you drag to scrub: the value follows the hand, pushes past the range on a rubber band, and a click without…
• Number InputChakra UI · ReactUsed to enter a number, and increment or decrement the value using stepper buttons.
• Number FieldHeroUI · ReactNumber input fields with increment/decrement buttons, validation, and internationalized formatting
• Number FieldReact Spectrum · ReactNumberFields allow users to enter a number, and increment or decrement the value using stepper buttons.
• Number Fieldcoss ui · ReactA numeric input element with increment and decrement buttons, and a scrub area.
• Comp 28Origin UI · React
• Number InputArk UI · ReactA field that allows user input of numeric values.
• Basic number fieldReUI · ReactBasic number field
• Number InputPark UI · ReactA form input component for entering and adjusting numeric values.
• Slider With InputLobe UI · ReactSliderWithInput combines a slider with an input number field, allowing users to adjust values either by dragging the…
• Team SelectorKokonut UI · ReactSeat picker with a scrubbable number, generated avatars and an optional rolling price line.
• number-fieldIntent UI · Reactnumber-field
• Number FieldTailGrids · ReactA component for entering numeric values with increment and decrement buttons.
• Quantity StepperSpectrum UI · ReactAn animated quantity input for carts and forms with rolling digits, hold-to-repeat acceleration, and a boundary shake
• Color Value ControlToolcraft · React
• Number InputPanel UI · React NativeNumeric field stepped by buttons or typed by hand.
• Slider 08 - With Number InputShadcn Space · ReactOpacity slider kept in sync with a number input that clamps and rounds typed values, plus a live preview swatch.
• Quantity Stepper ButtonOpenSourceUI · React
• Quantity StepperKinetics · HTML/CSSValue pops on each change; clamps at zero
• Parameter Slideraudiocn · ReactA labelled slider with a numeric input, unit, marks, reset and a linear or log scale, for gain trims, delays…
• Number InputShark UI · ReactNumeric input for entering values.
• Money inputArc Library · ReactA currency field with live grouping, stable width, rolling digits, and minor-unit output.
• Number Range Filtersv-table · SvelteA number range picker with exact inputs, an optional slider, and explicit apply behavior.
• Number StepperUI Lab · ReactRolls each digit the way the count moves, and speeds up the longer you hold.
• Number inputCojeev UI · ReactA number field with readable formatting, a native editing caret and expressive stepping.
• Scrub Number FieldMicroKit · ReactA number field you drag to scrub and click to type, with a ruler that tracks the gesture.
• Number FieldROI UI · ReactA numeric input element with increment/decrement buttons and a scrub area.
• Number FieldSpaceUI · ReactAllows users to enter numeric values or adjust them step-by-step using increment and decrement buttons or keyboard…
• Currency SwitchZAYX · React Native
• Number FieldOUI · ReactReact aria components Number Field with shadcn characteristics.
• Glass StepperOpaline · ReactCapsule stepper with rolling digits, hold-to-accelerate and a shake at the limits.
• Currency InputReactFrame · ReactA money input with a currency picker: live thousands separators for any locale, the right number of decimals per…
• Number Fieldark-cn · ReactA shadcn-style number field component built with Ark UI primitives.
• Tailwind Number FieldReact Spectrum · React
• Comp 29Origin UI · React
• Basic number fieldReUI · ReactBasic number field
• Range Input ControlToolcraft · React
• Value ScrubberKinetics · HTML/CSSDrag horizontally to scrub the number
• Tempo Controlaudiocn · ReactAn editable BPM input with tap tempo, keyboard stepping and a rolling average.
• Number fieldArc Library · ReactEnter a bounded number with clear increment controls.
• Scrub InputUI Lab · ReactDrag the label and a tape measure runs under the needle, or just type.
• Number InputReactFrame · ReactA numeric field with minus/plus steppers, press-and-hold auto repeat, min/max clamping, decimal precision, prefix and…
• Vanilla Number FieldReact Spectrum · React
• Basic number fieldReUI · ReactBasic number field
• Slider ControlToolcraft · React
• Tally CounterUI Lab · ReactCounts in hand-drawn tally marks, one pen stroke at a time.
• Number field with buttons on rightReUI · ReactNumber field with buttons on right
• Vector ControlToolcraft · React
• Number field with spinner buttonsReUI · ReactNumber field with spinner buttons
• Number field in formReUI · ReactNumber field in form
• Number FieldReUI · ReactA numeric input element with increment and decrement buttons, and a scrub area.

Libraries with number input components

• ReUI
• Toolcraft
• UI Lab
• React Spectrum
• Kinetics

Related categories

• React Number Input Components
• Tailwind CSS Number Input Components
• Animated Number Input Components
• Input Components
• Text Input Components
• Select Components
• Form Field Components
• Form Components
• Textarea Components
• Switch Components
• Checkbox Components
• Slider Components
• Radio Components
• Combobox Components
• File Upload Components
• Search Input Components
• Date Picker Components
• Login Form Components
• Color Picker Components