NumberInput
v1.0.5Updated 28 Sept 2026Numeric spinbutton field with min/max clamping, step increments (keyboard + hold-to-repeat stepper buttons) and Intl.NumberFormat display when blurred — decimal, currency (default THB) or percent. Shows the raw editable
Preview
Live · 13 stories▸Why this is recommendednumberspinbuttonsteppercurrency+5
The default, out-of-the-box NumberInput.
- ✓Invoice quantities and unit prices (THB)
- ✓VAT / discount percentage fields
- ✓Stock reorder levels
- ✓Any bounded numeric entry
- Controlled (value/onValueChange) and uncontrolled (defaultValue) modes, null = empty
- min / max clamping on blur and on every step
- step increments with hold-to-repeat stepper buttons
- Keyboard: ArrowUp/Down = step, PageUp/Down = 10x step, Home/End = min/max
- precision rounding without floating-point residue
- Intl formats: 'decimal' | 'currency' (currency prop, default THB) | 'percent' (value 7 renders 7%)
- Locale prop (default th-TH)
- prefix / suffix adornments
- role=spinbutton with aria-valuenow / valuemin / valuemax / valuetext
- disabled / readOnly / error states, sizes sm / default / lg
- Hidden input carries the raw number for form submission when name is set
- i18n: labels prop overrides the stepper aria-labels
- ✕Free-form text (use Input)
- ✕Continuous ranges with visual feedback (use Slider)
- ✕Phone numbers or IDs (use InputMask)
Install
Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.
Usage
Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.
Props
valueControlled value; null = empty
—defaultValueUncontrolled initial value
—onValueChangeFires with the parsed number
—minLower clamp bound
—maxUpper clamp bound
—stepIncrement for arrows/steppers (default 1)
—precisionDecimal places rounded to on commit
—formatBlurred display format
—currencyISO 4217 code for currency format (default THB)
—localeBCP 47 locale (default th-TH)
—prefixLeading in-field adornment
—suffixTrailing in-field adornment
—showSteppersShow up/down buttons (default true)
—sizeField size
—labelField label
—hintHelper text below the field
—errorError message; flips invalid styling
—labelsOverride built-in UI strings (i18n)
—aria-invalidMark the field invalid from outside; the box paints the same destructive state as its own validation, with the alert in its own trailing slot (FormField clones this in from its error prop)
—aria-describedbyId(s) of outside hint or error text, kept alongside the messages the field owns (FormField clones this in)
—aria-requiredMark the input required for assistive tech (FormField clones this in from its required prop)
—aria-labelAccessible name where the layout has no room for a visible `label` — a filter row, a subscribe box beside its button. Prefer `label`: a visible one names the field for everybody. These components destructure a fixed prop set and used to DROP an aria-label a caller wrote, so such a field announced as nothing but its role.
—