# `PhiaUi.Components.Input`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/inputs/input.ex#L1)
Form-aware text input component integrating with `Phoenix.HTML.FormField`.
`phia_input/1` renders a labeled `` element with optional description
text and inline validation error messages sourced directly from the Ecto
changeset. It is the building block for text-based form fields in PhiaUI.
## When to use
Use `phia_input/1` whenever you need a single-line text, email, password,
number, or URL input that is bound to an Ecto changeset field. For multi-line
text, use `phia_textarea/1` instead. For select dropdowns, use `phia_select/1`.
## Basic usage
<.form for={@form} phx-submit="save" phx-change="validate">
<.phia_input field={@form[:email]} label="Email address" />
<.phia_input field={@form[:password]} type="password" label="Password" />
<.button type="submit">Sign in
## With description and debounce
The `:description` attribute renders helper text below the label. Combine with
`phx-debounce` to avoid validating on every keystroke:
<.phia_input
field={@form[:username]}
label="Username"
description="3–20 characters. Letters, numbers, and underscores only."
phx-debounce="blur"
/>
## Number input with constraints
<.phia_input
field={@form[:age]}
type="number"
label="Age"
min="18"
max="120"
placeholder="Your age"
/>
## File input
<.phia_input field={@form[:avatar]} type="file" label="Profile picture" />
## Read-only / disabled
<.phia_input field={@form[:email]} label="Email" readonly />
<.phia_input field={@form[:plan]} label="Plan" disabled />
## Error handling
Errors are read directly from `field.errors` — a list of `{msg, opts}` tuples
produced by Ecto's changeset validation. They are interpolated via the built-in
`translate_error/1` which substitutes `%{key}` placeholders from `opts`.
For Gettext-aware translations, translate the errors before passing the field
or replace `translate_error/1` after ejection:
# After `mix phia.eject Input`, customise lib/my_app_web/components/input.ex:
defp translate_error({msg, opts}) do
Gettext.dgettext(MyAppWeb.Gettext, "errors", msg, opts)
end
## Class customisation
Pass `:class` to merge additional Tailwind classes into the input via `cn/1`.
The last-wins merge strategy means your classes override the defaults:
<.phia_input field={@form[:code]} label="Code" class="font-mono tracking-widest" />
# `phia_input`
Renders a labeled text input integrated with `Phoenix.HTML.FormField`.
Produces a `