Catalog Forms

<.money>

ConnieUI.Forms

HEEx
<div class="w-72">
  <ConnieUI.Forms.money currency="DKK" field={@field} />
</div>

Variant matrix

Every combination of one or two attributes, side by side.

Controls

:string

Set by the example

field currency_field currency currencies

Docs

An amount and the currency it is in, as one control. `type="text"` with `inputmode="decimal"`, not `type="number"`. A number input brings spinner arrows nobody nudges a salary with, refuses a comma on the keyboards half of Europe types on, and turns a plain whole number into a validation error whenever `step` disagrees with it. Here a whole number is the easy case and decimals are there when they are meant. The value is rendered exactly as given, so a half-typed "1200," survives the change event that would otherwise erase the comma. A value that is *not* a string (a `Decimal` off a column with four decimal places, a float) has its trailing zeros trimmed first, because nothing should present a salary as 45000.0000. The amount is right-aligned with tabular figures, which is the financial convention and the only way a column of them lines up on the decimal point. The currency leads rather than trails, also convention, and it is a searchable combo box rather than a select: there are around 150 of them, and scrolling a native select to find SEK is not a thing anybody should do. Each option carries its flag and its full name, so the list can be searched by "krone" as readily as by "DKK", while the closed control shows just flag and code. Pass `currency_field` and `currencies` for a currency the payer can change, or `currency` alone for one they cannot.
Attribute Type Default Description
field * {:struct, Phoenix.HTML.FormField}
The amount.
currency_field {:struct, Phoenix.HTML.FormField} nil
The currency, as a combo box beside the amount. Needs `currencies`.
currency :any nil
A fixed currency code, shown as text. Ignored when `currency_field` is given.
currencies :list []
Options for the currency combo box: maps of `:code`, `:name`, and either `:flag` (a country code, for currencies whose flag we have) or `:symbol` (for the supranational ones like EUR and XOF, which have no flag of their own).
size :string "sm"
sm | md
rest :global