Number Input

A number field with − / + steppers, arrow-key steps, limits and locale formatting — and MoneyInput for amounts.

$ pnpm dlx shadcn@latest add https://dashral.com/r/number-input.json

Seats

1 to 50. Try the arrow keys, Shift+↑, Home and End.

Installation

$ pnpm dlx shadcn@latest add https://dashral.com/r/number-input.json

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Using Dashral often? Add the registry to components.json once:

components.json

1{
2  "registries": {
3    "@dashral": "https://dashral.com/r/{name}.json"
4  }
5}

Then add components by name:

$ pnpm dlx shadcn@latest add @dashral/number-input

Usage

example.tsx

1import { NumberInput, MoneyInput } from "@/components/dashral/number-input"
2
3<>
4  <NumberInput label="Seats" defaultValue={5} min={1} max={50} />
5  <MoneyInput label="Price" currency="USD" defaultValue={49} />
6</>

Examples

Money

MoneyInput shows the currency's symbol and decimals: $1,250.00, Rp 25.000.000.

Price

Budget

Units and steps

suffix for a unit, step for the increment, stepper={false} to hide the buttons.

Weight

Discount

Cart

Steppers keep each quantity within stock, the totals follow, and a bar shows how far free shipping is.

Your cart

Retro 35mm Film Camera$159 · 4 in stock
Portra 400, 3-pack$36 · 20 in stock

Add $19 more for free shipping

Subtotal: $231
Shipping: $12
Total: $243

API reference

NumberInput

Also takes every prop of <input>(opens in a new tab).

Prop	Type	Default
`value / defaultValue`	`number \| null` Controlled or initial; null when empty.	`null`
`onValueChange`	`(value: number \| null) => void` On blur or Enter, and on every step.	—
`min / max`	`number` Limits; values are clamped to them.	—
`step`	`number` Arrow keys and buttons; ×10 with Shift or Page Up / Down.	`1`
`locale / formatOptions`	`string / Intl.NumberFormatOptions` Formatting when not editing, and how typing is read.	`LocaleProvider's`
`stepper`	`boolean` The − and + buttons.	`true`
`prefix / suffix`	`ReactNode` Inside the field, e.g. a unit.	—
`label`	`ReactNode` Shown above, linked to the control.	—
`description`	`ReactNode` A hint under the control.	—
`error`	`boolean \| ReactNode` true shows the error style; a message also shows under the control.	—
`labelAction`	`ReactNode` At the end of the label's row, e.g. a “Forgot password?” link or the current value.	—
`withAsterisk`	`boolean` Marks 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`	`string` ISO 4217 code, "USD", "IDR". Required.	—
`min`	`number`	`0`
`step`	`number`	`1 (1000 for currencies without decimals)`

Keyboard

Keys	Action
`↑`or`↓`	Add or subtract one step
`Shift+↑`or`Shift+↓`or`Page Up`or`Page Down`	Ten steps
`Home`or`End`	Jump to min / max (when set)
`Enter`	Commit what's typed

Accessibility

role="spinbutton" with aria-valuenow, min, max and the formatted value as text. The − / + buttons are labelled and left out of the tab order (the arrow keys do the same).