Form

Number Input

A numeric field with min / max / step, arrow-key stepping and Intl formatting (currency, percent, units) when it isn’t being edited. Accepts localized input like "1.234,5".

Value: 1250

Usage

  • Use for quantities, amounts and percentages that people adjust or type.
  • Use TextInput for numbers that aren’t quantities (phone, card, ZIP codes).
  • Use Slider when the position matters more than the exact value.
  • Don’t format while typing; formatting is applied on blur.

Installation

Install the package (React 19):

terminal
npm install @krackedui/motion

Import the styles once, in your app entry or root layout:

/src/main.tsx
import '@krackedui/motion/styles.css';

Use it anywhere inside your app's <Theme> (see Installation):

/src/NumberInputExample.tsx
import { useState } from 'react';
import { Field, NumberInput } from '@krackedui/motion';

export function AmountField() {
  const [amount, setAmount] = useState<number | null>(1250);
  return (
    <Field label="Amount">
      <NumberInput value={amount} onValueChange={setAmount} min={0} format={{ style: 'currency', currency: 'USD' }} align="end" />
    </Field>
  );
}

Examples

Stepper

The stepper buttons are for pointers; keyboard users use the arrow keys (Shift for ×10).

Between 1 and 50.

Percent

The value is a fraction (0.15); people see and type percent (15).

Locale and unit

px

Invalid and disabled

The budget must be at least $100.

Dark theme

API Reference

NumberInput

A text <input role="spinbutton"> (not type="number", so formatting and localized input work). The ref goes to the input; other input attributes (autoFocus, aria-*, data-*, onKeyDown, which can preventDefault() the built-in stepping) are passed to it.

PropTypeDefault
value / defaultValue
number | null
onValueChange
(value: number | null) => void
min / max
number
step
number
1
format
Intl.NumberFormatOptions
locale
string
"en-US"
placeholder
string
size
"sm""md""lg"
"md"
stepper
boolean
false
align
"start""end"
"start"
icon
IconName
trailing
ReactNode
invalid
boolean
false
disabled
boolean
false
required
boolean
false
readOnly
boolean
false
name
string
id
string
className
string
style
CSSProperties
onFocus / onBlur
(event: FocusEvent<HTMLInputElement>) => void
aria-label
string
aria-labelledby
string
aria-describedby
string

Helpers

PropTypeDefault
parseLocaleNumber(text, locale?)
(text: string, locale?: string) => number | null

Accessibility

  • WAI-ARIA spinbutton: role="spinbutton" with aria-valuenow, aria-valuemin, aria-valuemax and aria-valuetext (the formatted value, e.g. "$1,250.00").
  • ↑ / ↓ step, Shift + arrows or Page Up / Page Down step ×10, Home / End jump to min / max. Enter commits typed text.
  • The stepper buttons are labelled "Increase" / "Decrease" and kept out of the Tab order (the keys do the same).
  • inputmode brings up the numeric keyboard on phones.
© 2026 Motion. Internal documentation.