AvenUI.Components.Input (AvenUI v1.0.0)

Copy Markdown View Source

Form input components: text fields, selects, textareas, and search inputs. Designed to work seamlessly with Phoenix.HTML.Form and Ecto.Changeset.

Features

  • Consistent sizing and border tokens
  • Error state driven by Phoenix.HTML.Form field errors
  • Label, hint, and error message composable slots
  • Prefix/suffix icon support
  • Native integration with phx-change and phx-debounce

Examples

<%!-- Basic usage with a changeset form --%>
<.input field={@form[:email]} type="email" label="Email address" />

<%!-- With hint text --%>
<.input field={@form[:username]} label="Username" hint="Letters and numbers only" />

<%!-- Password with show/hide toggle (uses the Toggle hook) --%>
<.input field={@form[:password]} type="password" label="Password" />

<%!-- Search input --%>
<.input type="search" name="q" value={@query} placeholder="Search…" phx-change="search" phx-debounce="200" />

<%!-- With prefix icon --%>
<.input field={@form[:amount]} type="number" label="Amount">
  <:prefix>฿</:prefix>
</.input>

<%!-- Standalone (no form) --%>
<.input type="text" name="tag" id="tag-input" value="" placeholder="Add tag…" />

Summary

Functions

input(assigns)

Renders a form input with label, error handling, and optional prefix/suffix.

select(assigns)

Select dropdown — wraps <select> with consistent styling.

Functions

input(assigns)

Renders a form input with label, error handling, and optional prefix/suffix.

Attributes

  • id (:any) - Defaults to nil.
  • name (:any) - Defaults to nil.
  • value (:any) - Defaults to nil.
  • type (:string) - Defaults to "text". Must be one of "text", "email", "password", "search", "number", "tel", "url", or "textarea".
  • label (:string) - Defaults to nil.
  • hint (:string) - Defaults to nil.
  • placeholder (:string) - Defaults to nil.
  • required (:boolean) - Defaults to false.
  • disabled (:boolean) - Defaults to false.
  • class (:string) - Defaults to nil.
  • field (Phoenix.HTML.FormField) - A %Phoenix.HTML.FormField{} — binds id, name, value, errors automatically.
  • Global attributes are accepted. Supports all globals plus: ["phx-change", "phx-blur", "phx-focus", "phx-debounce", "autocomplete", "min", "max", "step", "pattern", "readonly"].

Slots

  • prefix - Content rendered inside the input on the left (icon or text like '฿', '@').
  • suffix - Content rendered inside the input on the right (clear button, unit label).
  • inner_block

select(assigns)

Select dropdown — wraps <select> with consistent styling.

Example

<.select field={@form[:region]} label="Region" options={["Bangkok", "Singapore", "Tokyo"]} />

<.select name="status" label="Status" options={[{"Active", "active"}, {"Inactive", "inactive"}]} value={@filter} />

Attributes

  • id (:any) - Defaults to nil.
  • name (:any) - Defaults to nil.
  • value (:any) - Defaults to nil.
  • label (:string) - Defaults to nil.
  • hint (:string) - Defaults to nil.
  • options (:list) (required)
  • prompt (:string) - Placeholder option (empty value). Defaults to nil.
  • field (Phoenix.HTML.FormField) - Binds from a Phoenix form field.
  • class (:string) - Defaults to nil.
  • Global attributes are accepted. Supports all globals plus: ["phx-change", "phx-blur", "disabled", "required"].