127 Components
Scrubbable Number Input
InputsFigma and Blender-inspired tactile numeric input with horizontal pointer drag scrubbing, elastic housing displacement, and kinetic digit roll.
Stiffness
240N/m
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/scrubbable-number-input.json"
Props
TypeScript props supported by <ScrubbableNumberInput />.
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | "Stiffness" | Field label displayed inside the left scrub handle. |
| defaultValue | number | 240 | Initial numeric value for uncontrolled usage. |
| min | number | 0 | Minimum allowed numeric value. |
| max | number | 1000 | Maximum allowed numeric value. |
| step | number | 5 | Numeric increment per scrub step or button press. |
| unit | string | "N/m" | Unit label rendered alongside the numeric value. |
| value | number | — | Controlled numeric value |
| pixelsPerStep | number | — | Mouse scrub sensitivity in pixels moved per step increment |
| onChange | (val: number) => void | — | Callback fired when numeric value updates |
Key Features
- Horizontal pointer-capture scrubbing anywhere on the pill with Shift (5x) and Alt (0.2x) precision modifiers.
- Hooke's Law horizontal housing tug that visualizes scrub tension and snaps back on release.
- Directional vertical slot-machine digit transitions powered by AnimatePresence.
Keyboard & Accessibility
- Implements WAI-ARIA role='spinbutton' with aria-valuemin, aria-valuemax, aria-valuenow, and aria-valuetext.
- Supports ArrowUp/ArrowDown/ArrowLeft/ArrowRight (plus Shift 10x multiplier) and Home/End keys.
- Includes explicit + and - stepper buttons for single-tap touch and assistive control.