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-suffixSource Story

Examples Code Usage Accessibility Changelog

Default

Částka

components--amount-input--defaultOpen standalone ↗Code

packages/ui/stories/amount-input.stories.tsx

export const Default = () => (
  <div style={col}>
    <Live />
  </div>
);

Variants

Částka

with unit — quiet suffix

Počet schůzek

whole numbers — decimals = 0 (KPI counts)

Oprava

negative allowed (corrections)

components--amount-input--variantsOpen standalone ↗Code

packages/ui/stories/amount-input.stories.tsx

export const Variants = () => (
  <div style={col}>
    <Labeled label="with unit — quiet suffix">
      <Live initial="1250000" suffix="Kč" />
    </Labeled>
    <Labeled label="whole numbers — decimals = 0 (KPI counts)">
      <Live label="Počet schůzek" initial="12" decimals={0} />
    </Labeled>
    <Labeled label="negative allowed (corrections)">
      <Live label="Oprava" initial="-350.5" negative suffix="Kč" />
    </Labeled>
  </div>
);

States

Částka

empty

Částka

grouped thousands, decimal comma

Částka

invalid (host decides, e.g. over budget)

Částka

disabled

components--amount-input--statesOpen standalone ↗Code

packages/ui/stories/amount-input.stories.tsx

export const States = () => (
  <div style={col}>
    <Labeled label="empty">
      <Live />
    </Labeled>
    <Labeled label="grouped thousands, decimal comma">
      <Live initial="1234567.8" suffix="Kč" />
    </Labeled>
    <Labeled label="invalid (host decides, e.g. over budget)">
      <Live initial="99999" suffix="Kč" invalid />
    </Labeled>
    <Labeled label="disabled">
      <Live initial="4500" suffix="Kč" disabled />
    </Labeled>
  </div>
);

Composition

Cena

Měna

components--amount-input--compositionOpen standalone ↗Code

packages/ui/stories/amount-input.stories.tsx

export const Composition = () => (
  <div style={{ ...col, maxWidth: 480 }}>
    <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 'var(--sp-4)' }}>
      <Live label="Cena" initial="349900" />
      <Live label="Měna" initial="" suffix="CZK" disabled />
    </div>
  </div>
);