Overview

raqam is a headless React number input with live, cursor-stable formatting, full internationalization, and first-class accessibility — in a ~1.8 KB core.

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

Install

npm install raqam

Peer dependencies: React 18 or 19.

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).

Where to next

• Getting Started — install and build your first field.
• Playground — try raqam live in the browser.
• API Reference — hooks, components, presets, utilities.
• Guides — formatting, locales, RTL, Next.js, accessibility.
• Recipes — react-hook-form, Formik, Tailwind, shadcn/ui, and more.

Bundle size

Measured min + brotli (including dependencies), enforced in CI: