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

Import

import { AmountInput } from '@acrm/ui'

Props

AmountInput packages/ui/src/components/AmountInput.tsx

NameTypeDefaultDescription
value *string—Syrová hodnota („1234.5"; prázdné = bez hodnoty).
onValue *(raw: string) => void——
suffixstring—Jednotka na konci pole („Kč", „%", „h").
decimalsnumber2Nejvýš desetinných míst (výchozí 2, celá čísla = 0).
negativebooleanfalseSmí být záporná? (výchozí ne — mínus se spolkne).
ariaLabelstring——
placeholderstring——
invalidboolean——
describedBystring——
classNamestring—Šířková varianta obalu (acrm-inputwrap--num …).
disabledboolean——
autoFocusboolean——
onBlur() => void——
localestring—Locale formátování; výchozí <html lang>.
variant'field' | 'formless''field'field (výchozí) = pole formuláře .acrm-inputwrap; formless = řádek form-less dialogu (.fl-in > input.fl-text, bez rámečku — fokus kreslí řádek), stejně jako MaskedInput. Maska, krokování šipkami i validace jsou v obou tvarech tytéž.

CSS classes

.acrm-inputwrap.acrm-amountwrap.acrm-amount-suffix

Files

Masked inputPhone inputInputField