Components › Forms & input › Text field › Amount input

Amount input

canon

Amount or count typed as a mask: digits and separators only, thousands grouped as you type, a dot read by context (12.345 = thousands, 12.5 = decimal), nothing typed is ever cut off silently.

Merged to origin/main 28 September 2026 (acrm MR !4089). Replaces raw <input type="number"> for amounts on 16 app surfaces (advances, benefits, expenses, KPI, costs, documents, pricing, assets, budgets, vehicles, cash desk, orders, phones). Raw value contract -?\d*(\.\d*)? unchanged for hosts. Dot rule and no-silent-truncation per AD 28 Sep 2026; caret anchoring after the decimal comma fixed in number-core (caretInFormatted), shared with RecordRail. Canon 28 Sep 2026 (AD approved M3; /ds renders the stories from the main build).

Used in 12 files · 9 areas · 13× — components/clen-tymu, components/dialog, components/org, components/products, pages/OrderDetailPage, pages/PokladnaDetailPage …

@acrm/ui <AmountInput>.acrm-inputwrap .acrm-amountwrap .acrm-amount-suffixSourceStory
ExamplesCodeUsageAccessibilityChangelog

An amount or count typed as a mask: only digits and separators are accepted, thousands are grouped as you type, and nothing the user typed is ever cut off silently. Component AmountInput (packages/ui/src/components/AmountInput.tsx), built on packages/ui/src/lib/number-core.ts — the same core as number editing in RecordRail. Merged to origin/main 28 September 2026 (acrm MR !4089, "fix(ui): M3 masek — částka = maska (AmountInput), tečka podle kontextu"), under the owner's binding rule of 14 Sep 2026 (.claude/rules/design-system.md §"Vstupy a mobil"): a structured value is a mask, never free text.

The value contract is the raw string -?\d*(\.\d*)? (dot decimal, no grouping) — exactly what <input type="number"> used to emit, so host calculations do not change. The formatted text (1 234,50) lives only inside the input.

When to use

  • Money amounts in forms and drawers (costs, advances, benefits, budgets, prices, KPI money targets) — decimals={2} (default), unit as suffix ("Kč", "%").
  • Counts (KPI calls, headcount) — decimals={0}; the field then refuses any decimal separator.
  • Negative values only where the domain allows them — negative.

When not to use

  • Inline table cells with their own editing model (deal detail line items) — keep the cell editor.
  • Identifiers that happen to be digits (IČO, PSČ, phone) — use Masked input / Phone input.
  • Read-only display of an amount — format it as text (see "Compact money" canon), not a disabled field.

Anatomy

  • .acrm-inputwrap.acrm-amountwrap — the field shell; the number is right-aligned like in listings.
  • input — type="text", inputMode="decimal" (or numeric for decimals={0}).
  • .acrm-amount-suffix — optional muted unit at the end (aria-hidden; put the unit into the label or ariaLabel too).

Best practices

Do
  • Comma is always the decimal separator; at most decimals digits after it — a further digit is simply not accepted.
  • A dot is read by context (AD 28 Sep 2026): followed by exactly three digits (or groups of three) it is a thousands separator — 12.345 → 12 345, 1.234.567 → 1 234 567; followed by one or two digits it is a decimal — 12.5 shows as typed and becomes 12,5 on blur. Pasting follows the same rule (1 234,50 → 1234.50).
  • Let the field keep its own draft: a host that stores minor units (haléře) does not lose a trailing 12,.
  • Arrow ↑/↓ step the value like the native stepper.
Don’t
  • Don't truncate or round what the user typed — an invalid shape (12.3456, two commas, 1.2,5) is refused, the text stays as it was.
  • Don't use type="number" — it drops grouped values (300 000) entirely.
  • Don't re-format on every host render — pass the raw value back and let the field format.

Content

  • Label says what and in which unit ("Částka (Kč)", "Měsíční náklad"); the unit also goes into suffix when it helps scanning.
  • No placeholder amounts that look like real data; empty is empty.
  • Masked input, Phone input — the other structured-value masks.
  • Input — plain text field.
  • Record rail — number editing in the rail shares number-core (caret anchoring); amounts in the rail will take the same dot rule (wave M4b).

Source: docs/text-field/amount-input.usage.md · GitLab