Input
Render labelled inputs with descriptions and errors.
Preview
Example
<.input field={@form[:email]} type="email" label="Email" required />API contract
input/1 uses declared Phoenix attributes and slots. This table is generated from the compiled component metadata.
| Attribute | Type | Required | Default | Accepted values |
|---|---|---|---|---|
field |
{:struct, Phoenix.HTML.FormField} |
No | nil |
Any value matching the declared type |
id |
:string |
No | nil |
Any value matching the declared type |
name |
:string |
No | nil |
Any value matching the declared type |
label |
:string |
Yes | — |
Any value matching the declared type |
type |
:string |
No | "text" |
Any value matching the declared type |
value |
:any |
No | nil |
Any value matching the declared type |
description |
:string |
No | nil |
Any value matching the declared type |
errors |
:list |
No | [] |
Any value matching the declared type |
color |
:atom |
No | nil |
[nil, :neutral, :primary, :secondary, :accent, :info, :success, :warning, :error] |
size |
:atom |
No | nil |
[:xs, :sm, :md, :lg, :xl, nil] |
class |
:any |
No | nil |
Any value matching the declared type |
rest |
:global |
No | — |
global includes ["accept", "autocomplete", "capture", "disabled", "form", "list", "max", "maxlength", "min", "minlength", "multiple", "pattern", "placeholder", "readonly", "required", "step"] |
States and behavior
Default, disabled, described, and server-invalid states are supported. Text-like fields also pass applicable native read-only and required attributes.
Keyboard and accessibility
The control uses its native HTML keyboard behavior. Keep the visible label and do not replace it with placeholder text.