PhiaUi.Components.InputAddon (phia_ui v0.1.17)

InputAddon component — wraps an input with optional prefix and suffix decorators.

Renders a flex container that visually attaches a prefix or suffix element (currency symbol, units, button, icon) to an input field. Focus ring is applied at the container level so the whole group lights up when the inner input is focused.

Examples

<%!-- Currency prefix --%>
<.input_addon>
  <:prefix>$</:prefix>
  <input type="number" placeholder="Amount" />
</.input_addon>

<%!-- Domain suffix --%>
<.input_addon>
  <input type="text" placeholder="your-handle" />
  <:suffix>.com</:suffix>
</.input_addon>

<%!-- Both prefix and suffix --%>
<.input_addon>
  <:prefix>https://</:prefix>
  <input type="text" placeholder="example" />
  <:suffix>.com</:suffix>
</.input_addon>

Summary

Functions

input_addon(assigns)

Renders an input with optional prefix and/or suffix decorators.

Functions

input_addon(assigns)

Renders an input with optional prefix and/or suffix decorators.

Examples

<.input_addon>
  <:prefix>$</:prefix>
  <input type="number" />
</.input_addon>

Attributes

class (:string) - Additional CSS classes merged via cn/1. Defaults to nil.
disabled (:boolean) - When true, renders the wrapper as visually disabled. Defaults to false.
Global attributes are accepted. HTML attributes forwarded to the wrapper element.

Slots

prefix - Content rendered before the input (currency symbol, icon, text).
suffix - Content rendered after the input (units, icon, button).
inner_block (required) - The actual input element.