LineaUI.Components.NumberInput (linea_ui v0.3.0)

Copy Markdown View Source

A numeric field for money and quantities that shows the number the way the person's locale writes it (1.234,56 in pt-BR, 1,234.56 in en) and submits the plain machine value (1234.56).

<.number_input field={@form[:price]} label="Price" prefix="R$" decimals={2} min={0} />
<.number_input field={@form[:quantity]} label="Quantity" steppers min={1} step={1} suffix="un" />
<.number_input name="discount" value={Decimal.new("12.5")} suffix="%" max_decimals={2} max={100} />
<.number_input field={@form[:amount]} locale="en" align="right" />

The visible input has no name: a hidden input named like the field carries the machine value, and a bubbling input event fires from it whenever that value changes, so a surrounding phx-change runs. phx-debounce/phx-throttle go to the hidden input.

value may be an integer, a float, a numeric string or a Decimal. The server formats it for the first paint; a value the server sends later wins over the one in the browser, and re-rendering the same value does nothing.

Typing keeps what the person writes (digits, the decimal separator, the grouping separator and a leading - when negatives are allowed); leaving the field clamps it to min/max, rounds it to decimals/max_decimals and writes it grouped. Arrow up and down (and the steppers) move by step, Page up and down by ten steps.

The behavior lives in the LineaUI.NumberInput hook, so the field needs a stable id (it gets one from field or name).

Summary

Functions

number_input(assigns)

Renders the number input.

Functions

number_input(assigns)

Renders the number input.

Events: none of its own. The hidden input dispatches a bubbling input event when the machine value changes, so the form's phx-change receives %{"name" => "1234.56"} ("" when the field is emptied; the typed text when it is not a number, so the server can reject it).

Attributes

  • id (:string) - The visible input's id. Defaults to the field id, then name.
  • name (:string) - Defaults to the field name.
  • value (:any) - A number, a numeric string or a Decimal. Defaults to the field value.
  • field (Phoenix.HTML.FormField) - A form field: fills id, name, value and errors. Defaults to nil.
  • label (:string) - The caption. Defaults to nil.
  • label_class (:any) - Classes of the caption text. Defaults to nil.
  • help (:string) - The small line under the control. Defaults to nil.
  • errors (:list) - Defaults to [].
  • disabled (:boolean) - Defaults to false.
  • locale (:string) - Picks the separators: pt-BR writes 1.234,56, en writes 1,234.56. Defaults to "pt-BR".
  • decimal_separator (:string) - Overrides the locale's decimal separator. Defaults to nil.
  • thousands_separator (:string) - Overrides the locale's grouping separator; "" turns grouping off. Defaults to nil.
  • decimals (:integer) - Always this many decimals (2 for money: 10 shows 10,00). Defaults to nil.
  • max_decimals (:integer) - At most this many decimals; fewer are shown as typed. Ignored when decimals is set. Defaults to nil.
  • min (:any) - The lowest value; a negative sign can be typed only when it is below zero or absent. Defaults to nil.
  • max (:any) - The highest value. Defaults to nil.
  • step (:any) - What the arrow keys and the steppers add or take away. Defaults to 1.
  • steppers (:boolean) - − and + buttons on either side. Defaults to false.
  • decrement_label (:string) - The accessible name of −. Defaults to "Decrease".
  • increment_label (:string) - The accessible name of +. Defaults to "Increase".
  • prefix (:string) - A box before the input, like R$. Defaults to nil.
  • suffix (:string) - A box after the input, like % or un. Defaults to nil.
  • variant (:string) - The input's look, as in input. Defaults to "outlined". Must be one of "outlined", or "filled".
  • size (:string) - Defaults to "md". Must be one of "sm", "md", or "lg".
  • shape (:string) - Defaults to "rounded". Must be one of "rounded", or "pill".
  • align (:string) - Defaults to "left". Must be one of "left", "right", or "center".
  • wrapper_class (:any) - Classes of the block around the field. Defaults to nil.
  • class (:any) - Classes of the visible input. Defaults to nil.
  • Global attributes are accepted. Goes to the visible input, except phx-debounce/phx-throttle, which go to the hidden one. Supports all globals plus: ["autocomplete", "autofocus", "form", "placeholder", "readonly", "required"].