Renders a labelled text input.

Examples

<.text_input name="email" type="email" label="Email address"
             placeholder="you@example.com" required />

<.text_input name="price" type="number" label="Price" prefix="$" suffix="USD" />

<.text_input name="q" placeholder="Search…" phx-change="search" phx-debounce="300">
  <:icon><Heroicons.magnifying_glass class="h-4 w-4" /></:icon>
</.text_input>

Accessibility

Hint and error text are wired to the input through aria-describedby, and an error also sets aria-invalid and is announced via role="alert".

Attributes

• id (:string) - Defaults to nil.
• name (:string) (required)
• type (:string) - Defaults to "text". Must be one of "text", "email", "password", "search", "tel", "url", "number", "date", "datetime-local", "month", "time", "week", or "color".
• value (:string) - Defaults to nil.
• label (:string) - Defaults to nil.
• placeholder (:string) - Defaults to nil.
• hint (:string) - Helper text beneath the field. Defaults to nil.
• error (:string) - Validation message. Sets aria-invalid. Defaults to nil.
• prefix (:string) - Static text inside the field, before the value. Defaults to nil.
• suffix (:string) - Static text inside the field, after the value. Defaults to nil.
• disabled (:boolean) - Defaults to false.
• readonly (:boolean) - Defaults to false.
• required (:boolean) - Defaults to false.
• class (:string) - Applied to the <input> itself. Defaults to nil.
• container_class (:string) - Defaults to nil.
• Global attributes are accepted. Supports all globals plus: ["autocomplete", "autofocus", "list", "max", "maxlength", "min", "minlength", "pattern", "step", "inputmode", "form"].

Slots

• icon - Rendered inside the field on the leading edge.
• trailing - Rendered inside the field on the trailing edge — a button, say.