PhiaUi.Components.Form (phia_ui v0.1.17)

Form Integration Components for Phoenix LiveView.

Provides components that integrate with Phoenix.HTML.Form and Ecto changesets. Handles error display, real-time validation via phx-debounce, and form accessibility.

Components

Function	Purpose
`phia_input/1`	All-in-one input: label + input + description + errors
`form_field/1`	Composable wrapper: label + slot + description + errors
`form_label/1`	Accessible `<label>` linked to input via `field.id`
`form_message/1`	Conditional error messages from changeset

Error Translation

By default, errors are translated using a simple placeholder interpolator. To use a custom translator (e.g., from gettext), configure:

config :phia_ui, :error_translator_function, {MyApp.CoreComponents, :translate_error}

The custom function must accept {message, opts} and return a string.

Example

<.phia_input field={@form[:email]} type="email" label="Email" />

<.phia_input
  field={@form[:password]}
  type="password"
  label="Password"
  description="At least 8 characters."
/>

Summary

Functions

form_field(assigns)

Composable form field wrapper.

form_label(assigns)

Renders an accessible <label> linked to the input via for={@field.id}.

form_message(assigns)

Renders changeset error messages for a field. Renders nothing when there are no errors.

phia_input(assigns)

Renders a form input integrated with Phoenix.HTML.FormField.

translate_error(arg)

Translates a {message, opts} error tuple from a changeset.

Functions

form_field(assigns)

Composable form field wrapper.

Renders: label → slot (input) → description → error messages. Use this when you need full control over the input element inside.

Attributes

field (Phoenix.HTML.FormField) (required) - A Phoenix.HTML.FormField from @form[:field_name].
label (:string) - Label text. Defaults to nil.
description (:string) - Helper text below the input slot. Defaults to nil.

Slots

inner_block (required) - The input component (e.g. a native input or phia_input).

form_label(assigns)

Renders an accessible <label> linked to the input via for={@field.id}.

Attributes

field (Phoenix.HTML.FormField) (required) - FormField to link the label to.
class (:string) - Additional CSS classes. Defaults to nil.
Global attributes are accepted. HTML attributes forwarded to the label element.

Slots

inner_block (required) - Label text or content.

form_message(assigns)

Renders changeset error messages for a field. Renders nothing when there are no errors.

Attributes

field (Phoenix.HTML.FormField) (required) - FormField to read errors from.
class (:string) - Additional CSS classes. Defaults to nil.

phia_input(assigns)

Renders a form input integrated with Phoenix.HTML.FormField.

Includes label, input, description, and changeset error messages in a single component. Applies phx-debounce="blur" by default for real-time validation.

Attributes

field (Phoenix.HTML.FormField) (required) - A Phoenix.HTML.FormField from @form[:field_name].
type (:string) - HTML input type. Defaults to "text".
label (:string) - Label text rendered above the input. Defaults to nil.
description (:string) - Helper text rendered below the input. Defaults to nil.
class (:string) - Additional CSS classes for the input element. Defaults to nil.
Global attributes are accepted. HTML attributes forwarded to the input element. Supports all globals plus: ["autocomplete", "placeholder", "readonly", "required", "disabled"].

translate_error(arg)

Translates a {message, opts} error tuple from a changeset.

Uses the configured :error_translator_function when set, otherwise falls back to interpolating %{key} placeholders with values from opts:

Enum.reduce(opts, msg, fn {k, v}, acc -> String.replace(acc, "%{#{k}}", to_string(v)) end)

Configure a custom translator:

config :phia_ui, :error_translator_function, {MyApp.CoreComponents, :translate_error}