NumberInput with motion: odometer digits that spin as far as the number travelled, steppers that repeat when held, and a limit you can feel: the number strains against it, harder with each push.
$ pnpm dlx shadcn@latest add https://dashral.com/r/motion-number-input.jsonInstallation
$ pnpm dlx shadcn@latest add https://dashral.com/r/motion-number-input.jsonAdds components/dashral/motion/number-input.tsx, the Number Input it builds on (in components/dashral/), motion and the motion files every motion component shares. With the registry in your components.json:
$ pnpm dlx shadcn@latest add @dashral/motion-number-inputUsage
The same as Number Input, imported from components/dashral/motion/: swap the import and it moves.
import { NumberInput } from "@/components/dashral/motion/number-input"
<NumberInput label="Seats" value={seats} onValueChange={setSeats} min={1} max={50} meter />Examples
Pill
variant="pill": round − and + buttons and the unit beside the number, its word turning from seat to seats; at 3 guest passes + strains and Max 3 rises.
Seats on a plan
Hold + and the seats climb faster and faster, the price rolling along; at 50 the number strains back and Max 50 rises. The meter shows how full the plan is.
Drag to set
scrub: drag the number sideways, a step every few pixels, with a rubber band past 0% and 100%; End and Home spin the wheels the whole way.
Cart
Each quantity rolls and strains at what's in stock, the totals roll after it, the bar glides toward free shipping, and a removed line folds away.
Compared with Default
A new number slides in whole. − and + step once per click and switch off at a limit.
Motion
Odometer wheels that turn as far as the number travelled, blurring with speed; hold to repeat faster and faster; at a limit the number strains and springs back, the icon shakes and "Max 50" rises; drag it with scrub, see it on a meter.
How the two editions differ in general, and which to use where: Motion.
API reference
Every prop of Number Input, and every attribute of the element it renders. What the Motion edition adds is marked Motion.
NumberInput
Also takes every prop of <input>(opens in a new tab).
| Prop | Type | Default |
|---|---|---|
variant | "default" | "pill"
| "default" |
scrub | boolean
| false |
meter | boolean
| false |
limitHint | boolean
| true |
value / defaultValue | number | nullControlled or initial; null when empty. | null |
onValueChange | (value: number | null) => voidOn blur or Enter, and on every step. | — |
min / max | numberLimits; values are clamped to them. | — |
step | numberArrow keys and buttons; ×10 with Shift or Page Up / Down. | 1 |
locale / formatOptions | string / Intl.NumberFormatOptionsFormatting when not editing, and how typing is read. | LocaleProvider's |
stepper | booleanThe − and + buttons. | true |
prefix / suffix | ReactNodeInside the field, e.g. a unit. | — |
label | ReactNodeShown above, linked to the control. | — |
description | ReactNodeA hint under the control. | — |
error | boolean | ReactNodetrue shows the error style; a message also shows under the control. | — |
labelAction | ReactNodeAt the end of the label's row, e.g. a “Forgot password?” link or the current value. | — |
withAsterisk | booleanMarks the label with an asterisk, e.g. alongside required. | false |
classNames | { root, label, description, error }Classes for each part. | — |
MoneyInput
NumberInput with the currency's symbol and decimals. Takes the same props.
| Prop | Type | Default |
|---|---|---|
currency | stringISO 4217 code, "USD", "IDR". Required. | — |
min | number | 0 |
step | number | 1 (1000 for currencies without decimals) |
MoneyInput comes with it, in the same file, taking the same props.
Motion
- Each digit is a wheel of 0–9 that turns as many places as its column really moved: 9 to 10 turns the ones once and opens a tens column; 5 to 50 spins the ones round four and a half times (capped near two turns, landing on the same digit). Farther takes a little longer; every turn carries a soft blur that grows with speed on a long spin, sharp again at rest.
- Hold − or + and it repeats after 400ms, faster and faster down to 35ms; on a phone each step gives a tiny buzz.
- At a limit the steppers stay pressable: the number strains toward the limit and springs back, harder with each push in a row; the icon shakes, the box flashes its border, and "Max 50" (or Min) rises above the box's end. Home or End at a limit pushes the same way.
- scrub turns the number into a slider: a step every 8px of drag, and past a limit it follows with a rubber band, springing back on release. meter glides a bar along the bottom between min and max, and it bumps at a limit.
- While you type it's a plain field; on Enter or blur the wheels turn to what you typed. With reduced motion the number changes at once and nothing strains or blurs.