Money.Input.Components (Money.Input v0.1.0)

View Source

HEEx components for locale-aware money input.

Two components ship from this module:

Both render their HTML baseline server-side and degrade gracefully when JS is disabled. With the JS hook loaded (priv/static/money_input.js), they upgrade to live formatting and full picker behaviour.

For a plain number input (no currency), use Localize.Inputs.Components.number_input/1 from the sibling localize_inputs package.

Setup

Add the JS hooks in your assets/js/app.js:

import { MoneyInput, CurrencyPicker } from "money_input"
let Hooks = {}
Hooks.MoneyInput = MoneyInput
Hooks.CurrencyPicker = CurrencyPicker

And install the AutoNumeric peer dep:

npm install autonumeric

See Money.Input for a full feature overview.

Summary

Functions

currency_picker(assigns)

First-class searchable currency picker.

money_input(assigns)

Locale-aware money input.

Functions

currency_picker(assigns)

First-class searchable currency picker.

Renders as a trigger button (flag + ISO code). Clicking opens an overlay with a search input, recent selections (persisted in localStorage), pinned preferred currencies, and the full sorted currency list. On mobile, the overlay becomes a full-screen sheet.

Examples

<.currency_picker
  form={@form}
  field={:currency}
  current={:USD}
  preferred={[:USD, :EUR, :GBP, :JPY]}
/>

Attributes

  • form (Phoenix.HTML.Form) - Defaults to nil.
  • field (:atom) - Defaults to nil.
  • name (:string) - Explicit hidden-input name. Overrides form+field. Used by money_input/1 to inject a nested name like price[currency]. Defaults to nil.
  • input_id (:string) - Explicit id for the hidden value input. Defaults to nil.
  • current (:atom) (required)
  • allowed (:list) - Defaults to nil.
  • preferred (:list) - Defaults to [].
  • recents_limit (:integer) - Defaults to 5.
  • locale (:any) - Defaults to nil.
  • variant (:atom) - Defaults to :auto. Must be one of :auto, :dropdown, or :sheet.
  • id (:string) - Defaults to nil.
  • class (:string) - Defaults to nil.
  • button_class (:string) - Defaults to nil.
  • overlay_class (:string) - Defaults to nil.
  • row_class (:string) - Defaults to nil.

money_input(assigns)

Locale-aware money input.

Returns Money.t/0 on form submission. Renders the currency symbol as an adornment outside the input — the user only types digits and a decimal separator.

With currency_picker={true}, embeds the bundled currency_picker/1 in the symbol-adornment position so the user can switch currencies. Currency-aware precision: USD accepts 2 decimals, JPY 0, BHD 3.

Attributes

  • :default_currency — the currency used when the form value doesn't carry one and the user hasn't (yet) picked one. With the picker off this is the only currency the field accepts. With the picker on it pre-selects the trigger and acts as the fallback when the form value is blank.

Examples

<.money_input form={@form} field={:price} default_currency={:USD} />

<.money_input
  form={@form}
  field={:price}
  default_currency={:USD}
  currency_picker={true}
  preferred_currencies={[:USD, :EUR, :GBP]}
/>

Attributes

  • form (Phoenix.HTML.Form) (required)
  • field (:atom) (required)
  • value (:any) - Defaults to nil.
  • locale (:string) - Defaults to nil.
  • default_currency (:atom) - The currency used when the form value doesn't carry one. Pre-selects the picker. Defaults to nil.
  • currency_field (:atom) - Defaults to nil.
  • min (:any) - Defaults to nil.
  • max (:any) - Defaults to nil.
  • align (:atom) - Defaults to :right. Must be one of :left, :right, or :center.
  • placeholder (:string) - Defaults to nil.
  • symbol_position (:atom) - Defaults to :auto. Must be one of :auto, :prefix, or :suffix.
  • symbol_kind (:atom) - Defaults to :symbol. Must be one of :symbol, :iso, :narrow, or :none.
  • js (:boolean) - Defaults to true.
  • class (:string) - Defaults to nil.
  • input_class (:string) - Defaults to nil.
  • symbol_class (:string) - Defaults to nil.
  • currency_picker (:boolean) - Defaults to false.
  • allowed_currencies (:list) - Defaults to nil.
  • preferred_currencies (:list) - Defaults to [].
  • Global attributes are accepted. Supports all globals plus: ["disabled", "readonly", "required", "autofocus"].