🔢 Raqam

Why raqam?

Every other React number input forces a trade-off. raqam eliminates all four.

Live formatting

Formats as you type using the same cursor-boundary algorithm as react-number-format — no flicker, cursor stays in place.

Full i18n

Accepts Persian ۱۲۳, Arabic ١٢٣, Bengali ১২৩, Devanagari १२३, Thai ๑๒๓. Separators extracted dynamically via Intl.NumberFormat.

Headless

Zero styles. Bring Tailwind, CSS Modules, or any design system. Compound components or raw hooks — your choice.

Accessible

WAI-ARIA spinbutton role, aria-valuenow/min/max/valuetext, keyboard navigation (↑ ↓ PgUp PgDn Home End), focus management.

Quick install

npm install raqam
# or
pnpm add raqam
# or
yarn add raqam

Thirty-second example

import { NumberField } from "raqam"

export function PriceInput() {
  return (
    <NumberField.Root
      locale="en-US"
      name="price"
      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 → see $1,234.00. Type 1234.5 → see $1,234.5 (live, no flicker).

Bundle size

Import	Gzipped
raqam/core	< 2 KB
raqam (full)	< 9 KB
raqam/locales/fa	< 0.3 KB
raqam/locales/ar	< 0.3 KB