Format Presets

presets is a collection of named Intl.NumberFormatOptions objects for the most common number formatting patterns. Pass them directly as formatOptions.

Import

import { presets } from "raqam";
// or
import { presets } from "raqam/core";

Usage

import { presets } from "raqam";

<NumberField.Root formatOptions={presets.currency("USD")} locale="en-US" />
<NumberField.Root formatOptions={presets.percent} locale="en-US" />
<NumberField.Root formatOptions={presets.compact} locale="en-US" />

Reference

presets.currency(code)

presets.currency("USD")
// → { style: "currency", currency: "USD" }

Standard currency formatting. Shows symbol + thousands separators.

presets.accounting(code)

presets.accounting("USD")
// → { style: "currency", currency: "USD", currencySign: "accounting" }

Like currency but shows negative values in parentheses: (1,234.56). raqam automatically parses (...) back to a negative number.

presets.percent

presets.percent
// → { style: "percent" }

Formats 0.42 as "42%". Store values as decimals (0–1 range).

presets.compact

presets.compact
// → { notation: "compact" }

Short compact notation: 1,200,000 → "1.2M".

presets.compactLong

presets.compactLong
// → { notation: "compact", compactDisplay: "long" }

Long compact notation: 1,200,000 → "1.2 million".

presets.scientific

presets.scientific
// → { notation: "scientific" }

Scientific notation: 1234567 → "1.234567E6".

presets.engineering

presets.engineering
// → { notation: "engineering" }

Engineering notation (exponent always a multiple of 3): 12345 → "12.345E3".

presets.integer

presets.integer
// → { maximumFractionDigits: 0 }

No decimal places. 1234.5 → "1,235" (rounds).

presets.financial

presets.financial
// → { minimumFractionDigits: 2, maximumFractionDigits: 2 }

Always two decimal places. Combine with fixedDecimalScale prop to force 0.00 when empty.

presets.unit(unit)

presets.unit("kilometer")
// → { style: "unit", unit: "kilometer" }

Unit formatting. Any CLDR unit identifier works: "kilometer", "liter", "celsius", "kilometer-per-hour", etc.

Notation presets format on blur

compact, compactLong, scientific, and engineering produce strings (1.2K, 1.23E4) whose characters collide with continued typing, so raqam keeps your raw digits live while editing and only applies the notation on blur. This is automatic — you don't need to set liveFormat. See Formatting & Behavior → Notation.

percent stores the fraction: a displayed 42% is a value of 0.42, and typing 50 yields 0.5.

financial already sets minimumFractionDigits/maximumFractionDigits to 2, so it shows two decimals on its own. Adding the fixedDecimalScale prop keeps the two trailing zeros locked in even as the user edits.

Composing with your own options

Presets are plain objects — spread them to override:

// Compact currency (not standard but possible)
const compactCurrency = {
  ...presets.compact,
  style: "currency" as const,
  currency: "USD",
};