The number input,
done right.
Live formatting, full i18n, headless, and accessible — in a ~1.8 KB core. The React number field you stop fighting.
npm install raqamLive currency · steppers · keyboard nudging
Percent style, stored 0–1 · step ±1 pt
ارقام فارسی + افزونهٔ locale · راستبهچپ
Eliminates all four trade-offs.
Every other React number input forces a compromise. raqam refuses to pick.
Live formatting
Formats as you type with the same cursor-boundary algorithm as react-number-format — no flicker, cursor stays put.
Full i18n
Accepts Persian ۱۲۳, Arabic ١٢٣, Bengali ১২৩, Devanagari १२३, Thai ๑๒๓. Separators derived via Intl.NumberFormat.
Headless
Zero styles. Bring Tailwind, CSS Modules, or any design system. Compound components or raw hooks — your call.
Accessible
WAI-ARIA spinbutton role, aria-valuenow/min/max/valuetext, full keyboard navigation and focus management.
Currency to scrubbing to Persian.
All headless, all accessible, all live. Type into any field — the caret never jumps.
Live currency · steppers · keyboard nudging
Percent style, stored 0–1 · step ±1 pt
Drag the label to scrub · 0–100
Accounting sign · negatives in parentheses
Unit style · kilometer · step 0.1 km
ارقام فارسی + افزونهٔ locale · راستبهچپ
Compose it, ship it.
import { NumberField } from "raqam";export function PriceInput() { return ( <NumberField.Root locale="en-US" formatOptions={{ style: "currency", currency: "USD" }} defaultValue={0} minValue={0} > <NumberField.Label>Price</NumberField.Label> <NumberField.Group> <NumberField.Decrement>−</NumberField.Decrement> <NumberField.Input /> <NumberField.Increment>+</NumberField.Increment> </NumberField.Group> <NumberField.HiddenInput /> </NumberField.Root> );}Type 1234 — live currency formatting, cursor-stable.
Tiny by construction.
Min + brotli, dependencies included, enforced in CI.