Number Input

Numeric input. Free, MIT · Forms and input › Numbers, codes and masks

className and style go to the field wrapper; all other props go to the <input>.

Installation

npx valyro-cli@latest add number-input

npx shadcn@latest add https://valyro.xyz/r/number-input.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { NumberInput } from 'valyro-ui';

Prop	Type	Default
`value`	`number \| null`		Controlled `value`; use with `onValueChange`.
`defaultValue`	`number \| null`	`null`	Initial `value` when uncontrolled.
`onValueChange`	`(value: number \| null) => void`		Called with the new `value` when it changes.
`min`	`number`		Lower bound: typed and stepped values are clamped to it, and Home jumps to it.
`max`	`number`		Upper bound: typed and stepped values are clamped to it, and End jumps to it.
`step`	`number`	`1`	Amount added by the stepper buttons and arrow keys; Shift and Page Up/Down step 10×.
`precision`	`number`		Decimal places committed values are rounded to.
`locale`	`string`		BCP 47 locale for numbers and dates; defaults to the ThemeProvider's, then the browser's.
`formatOptions`	`Intl.NumberFormatOptions`		Display format, e.g. `{ style: 'currency', currency: 'USD' }`. Percent values are fractions (0.5 = 50%).
`allowWheel`	`boolean`	`false`	Step with the mouse wheel while the input is focused. Off by default to avoid accidental changes.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Field height and text size.
`invalid`	`boolean`		Danger border and `aria-invalid` on the input.
`labels`	`Partial<NumberInputLabels>`		Accessible names of the stepper buttons.
`name`	`string`		Submits the plain number ("1250.5", empty when unset) with the form, not the formatted text.

OTP Input — One-time code entry
Phone Input — Phone number with country picker, live formatting and an E.164 value
Masked Input — Masked input: cards with Luhn check, expiry, CVC, date, time
Text Input — Text fields
Textarea — Multiline text input
Search Input — Search field
Mentions Input — Text with @mentions and #tags, async suggestions
Tags Input — Tag entry
Select — Pick one option from a list
Multi Select — Pick several options
Combobox — Searchable select
Listbox — Option list on the page: one or several, Shift ranges