I’ve just published the first in a new series of libraries focused on input. First up is ex_money_input. Soon to come is one for plain numbers (which will be part of a new library, localize_inputs).
It’s the form-input layer for the elixir-money family. It rounds out the trio: ex_money for the data type, ex_money_sql for Ecto persistence, and now ex_money_input for users actually typing a value into a form.
Example component usage
<.money_input
form={@form}
field={:price}
default_currency={:USD}
currency_picker={true}
preferred_currencies={[:USD, :EUR, :GBP, :JPY]}
/>
Features
- A
<.money_input> HEEx component with a paired <.currency_picker>. Locale determines the separators, symbol position, fractional digits (USD 2, JPY 0, BHD 3), and even the digit system (Arabic, Persian).
- A small JS hook wrapping AutoNumeric (MIT, Alexandre Bonneau) for live formatting and cursor preservation. Optional — without it the input still works server-side. But
AutoNumeric does a great job on the UX side, respecting and understanding different locale grouping and fraction separators.
- An Ecto changeset bridge (
cast_money/3, validate_money/3) with currency-aware precision and bounds.
- A headless cast/validate/currency layer that’s usable without Phoenix.
Money Input Playground
There’s a Plug-based visualizer that demos every component across CLDR locales and currencies.
It’s deployed at https://elixir-money-input.fly.dev so you can explore its potential use for your projects.
Links
Docs: https://hexdocs.pm/ex_money_input
Source: https://github.com/ex-money/money_input
Integration guide: https://hexdocs.pm/ex_money_input/integration.html
Feedback welcome — particularly on the locales you actually ship to. The CLDR coverage is wide but there’s always a corner case.
