Money field

Overview

MoneyField is a thin wrapper around TextFieldthat bakes in the rules every monetary input across Flatpay needs to honour: European number formatting, tabular numerals, slashed zero, and a currency suffix that always sits to the right of the value. It's the only field that ships with a hero-size variant — for screens where the amount is the answer the page is asking for.

Currencies

Pass the currency code via the currency prop. The suffix is always set in mono, ALL CAPS, tracked — visually distinct from the value.

States

MoneyField inherits every state from TextField — the same border tones, focus ring, error treatment.

Hero size

For screens where the amount is the question — funding requests, balance edits, single-question forms — set size="hero". The value renders at metric.lg with tabular numerals, the suffix shifts to align with the new baseline, and the surface gets more breathing room.

Anatomy

Five named parts — the same as TextField, with the suffix slot reserved for the currency code.

Behavior

• 01Decimal keyboard on mobile. inputMode="decimal" by default — iOS and Android raise the numeric pad with comma and decimal point, never the full QWERTY.
• 02European format isn't parsed by <input type="number">. MoneyField uses type="text" under the hood so the comma decimal stays valid. Validate the value yourself on submit, or use Intl.NumberFormat + a controlled-component pattern.
• 03Suffix is presentational. The currency prop never enters the form value — only the numeric input does. Submit the currency separately as a hidden field if your backend needs it.
• 04Hero size is a layout decision. Use it when the amount headlines the screen. Avoid it on dense forms — three hero inputs in a column is the visual equivalent of three primary buttons.

Accessibility

• Currency in the accessible name. Include the currency in the label (e.g. label="Amount (DKK)") for fields where the suffix alone could be ambiguous to a screen-reader user. The visual suffix is aria-hidden by default.
• Decimal precision is server-side.Don't rely on the field to enforce two-decimal places — let the backend normalise. The component just keeps the value as-typed.
• Error semantics match every other Form field: aria-invalid + error message linked via aria-describedby.

Code

import { MoneyField } from "@flatpay-dk/ui";

// Default — Danish kroner
<MoneyField
  label="Amount"
  defaultValue="10,00"
  description="Use a memorable, unique name."
/>

// Different currency
<MoneyField label="Amount" currency="€" defaultValue="10,00" />

// ISO code when the locale calls for it
<MoneyField label="Amount" currency="DKK" defaultValue="10,00" />

// Hero — funding screen, single-question forms
<MoneyField
  size="hero"
  label="Funding amount"
  defaultValue="500000"
  currency="kr"
/>

// Invalid + error
<MoneyField
  label="Amount"
  defaultValue="10,00"
  error="Must be at least 100,00 kr."
/>

Best practices

Props

Related