# `PhiaUi.Components.InputAddon`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/inputs/input_addon.ex#L1)

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>

# `input_addon`

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.

---

*Consult [api-reference.md](api-reference.md) for complete listing*