LineaUI.Components.Input (linea_ui v0.1.1)

Copy Markdown View Source

LineOne's text inputs: outlined or filled, rounded or pill, three sizes, icons inside, success and error states, and input masks.

<.input name="username" placeholder="Username" />
<.input field={@form[:email]} type="email" label="Email" help="We never share it" />
<.input name="q" variant="filled" shape="pill" size="lg" placeholder="Search" />
<.input name="company" label="Company name" placeholder="Your Company">
  <:prefix><svg>…</svg></:prefix>
</.input>
<.input name="username" value="taken" state="error" help="Username is invalid" />
<.input name="amount" size="sm" align="right" />

Without a caption, help or errors it renders the bare <input> (wrapped in a positioning span when it has icons), so it can sit inside an input_group.

Masks

mask formats what is typed, as LineOne's Cleave.js examples do. mask_options tunes it:

<.input name="card" mask="credit_card" placeholder="xxxx xxxx xxxx xxxx" />
<.input name="date" mask="date" mask_options={%{pattern: ~w(m d Y), delimiter: "-"}} />
<.input name="time" mask="time" mask_options={%{pattern: ~w(h m s)}} />
<.input name="phone" mask="phone" />
<.input name="amount" mask="numeral" mask_options={%{thousands: "lakh"}} />
<.input name="code" mask="blocks" mask_options={%{blocks: [3, 2, 3, 3], delimiters: [".", "_", "-"], uppercase: true}} />
<.input name="ref" mask="blocks" mask_options={%{prefix: "Prefix", delimiter: "-", blocks: [6, 4, 4, 7]}} />
maskoptions
blocksblocks, delimiter, delimiters, prefix, uppercase, lowercase, numeric
credit_carddelimiter (" "); blocks follow the card brand (Amex 4-6-5, Diners 4-6-4)
datepattern of d m y Y (~w(d m Y)), delimiter ("/")
timepattern of h m s (~w(h m s)), delimiter (":")
phoneblocks ([3, 3, 4]), delimiter (" ")
numeralthousands (thousand lakh wan none), decimals (2), delimiter (","), decimal_mark ("."), positive

The input submits the masked text. mask_submit="raw" submits the unmasked value instead (digits, or a plain number like 1234.5 for numeral) through a hidden input that carries the field's name; phx-debounce/phx-throttle are copied onto it.

<.input field={@form[:amount]} mask="numeral" mask_submit="raw" phx-debounce="300" />

Clearing a focused input

clear_on_submit makes the field take the server's value after its form is submitted even while it has focus:

<.form for={@form} phx-submit="add">
  <.input id="todo" name="title" value={@title} clear_on_submit />
</.form>

The mask runs in the LineaUI.InputMask hook, so a masked input needs a stable id (it gets one from field; pass one otherwise when the input re-renders).

Summary

Functions

input(assigns)

Renders a text-like <input>, with its caption, help and errors when given.

Functions

input(assigns)

Renders a text-like <input>, with its caption, help and errors when given.

Attributes

  • field (Phoenix.HTML.FormField) - A form field: fills id, name, value and errors. Defaults to nil.
  • id (:string) - Defaults to the field's id.
  • name (:string) - Defaults to the field's name.
  • value (:any)
  • type (:string) - Defaults to "text". Must be one of "text", "email", "password", "number", "search", "tel", "url", "date", "time", "datetime-local", "month", "week", "color", "file", or "hidden".
  • variant (:string) - plain has no border nor background, for inputs inside a framed block. Defaults to "outlined". Must be one of "outlined", "filled", or "plain".
  • 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) - right aligns the typed text to the right, for amounts. Defaults to "left". Must be one of "left", or "right".
  • state (:string) - Paints the border and the help line. Errors set error on their own. Defaults to nil. Must be one of nil, "success", or "error".
  • 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) - Messages to show; field adds its own once the input was used. Defaults to [].
  • disabled (:boolean) - Defaults to false.
  • options (:list) - Suggestions, rendered as the input's <datalist>. Defaults to [].
  • mask (:string) - Defaults to nil.Must be one of nil, "blocks", "credit_card", "date", "time", "phone", or "numeral".
  • mask_options (:map) - Defaults to %{}.
  • mask_submit (:string) - raw submits the unmasked value (digits, a plain number) through a hidden input. Defaults to "formatted". Must be one of "formatted", or "raw".
  • clear_on_submit (:boolean) - LiveView never overwrites the value of a focused input, so a field that keeps focus after phx-submit (a todo or chat box) would keep its text. With this, the first server render after the surrounding form is submitted writes value into the input even while it has focus; render value="" to clear it. Needs a stable id. Defaults to false.
  • wrapper_class (:any) - Classes of the block around a captioned input. Defaults to nil.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted. Supports all globals plus: ["accept", "autocomplete", "autofocus", "form", "list", "max", "maxlength", "min", "minlength", "multiple", "pattern", "placeholder", "readonly", "required", "size", "step", "inputmode"].

Slots

  • prefix - An icon inside the input, on the left.
  • suffix - An icon inside the input, on the right.