PhiaUi.Components.AutocompleteInput (phia_ui v0.1.17)

Text input with HTML5 datalist suggestions.

Provides autocomplete_input/1 — a standard text input wired to a native HTML <datalist> element. As the user types, the browser shows matching suggestions from the list. No JavaScript required — it is entirely native browser behaviour.

Also provides form_autocomplete_input/1 for changeset-integrated forms.

When to use

Use autocomplete_input/1 when you need:

Simple suggestion lists (country, city, language, skill, tag)
Non-enforced suggestions — users can still type anything not in the list
The lightest possible implementation without a combobox or multi-select

For enforced option selection use phia_select/1. For complex search with remote options use combobox/1.

Basic usage

<.autocomplete_input
  name="country"
  value={@country}
  placeholder="Start typing a country..."
  suggestions={["Brazil", "Canada", "France", "Germany", "United States"]}
  phx-change="update_country"
/>

Dynamic suggestions from assigns

<.autocomplete_input
  name="language"
  value={@language}
  suggestions={@available_languages}
  phx-change="update_language"
/>

Form-integrated

<.form_autocomplete_input
  field={@form[:city]}
  label="City"
  suggestions={@cities}
  phx-change="validate"
/>

Summary

Functions

autocomplete_input(assigns)

Renders a text input with native browser datalist suggestions.

form_autocomplete_input(assigns)

Renders a form-integrated autocomplete input with label and error messages.

Functions

autocomplete_input(assigns)

Renders a text input with native browser datalist suggestions.

The <datalist> id is derived from the input's id so they are automatically linked via the list attribute. The browser handles rendering and filtering of suggestions natively — no JS needed.

Examples

<.autocomplete_input
  name="framework"
  value={@framework}
  suggestions={["React", "Vue", "Svelte", "Elixir"]}
  placeholder="Select a framework..."
/>

Attributes

id (:string) - HTML id for the <input>. Auto-generated if nil. Also used to link the datalist. Defaults to nil.
name (:string) - HTML name attribute. Defaults to nil.
value (:string) - Current input value. Defaults to nil.
suggestions (:list) - List of suggestion strings (or {label, value} tuples) rendered as <option> elements inside the <datalist>. The browser uses these as autocomplete candidates.
Defaults to [].
placeholder (:string) - Placeholder text shown when the input is empty. Defaults to nil.
disabled (:boolean) - Disables the input. Defaults to false.
class (:string) - Additional CSS classes merged into the <input> element. Defaults to nil.
Global attributes are accepted. HTML attributes forwarded to the <input> element. Supports all globals plus: ["phx-change", "phx-debounce", "phx-keydown", "required", "readonly", "autocomplete", "autofocus"].

form_autocomplete_input(assigns)

Renders a form-integrated autocomplete input with label and error messages.

Examples

<.form_autocomplete_input
  field={@form[:country]}
  label="Country"
  suggestions={@countries}
/>

Attributes

field (Phoenix.HTML.FormField) (required) - A Phoenix.HTML.FormField struct from @form[:field_name].
label (:string) - Label text rendered above the input. Defaults to nil.
description (:string) - Helper text rendered below the label. Defaults to nil.
suggestions (:list) - List of suggestion strings or {label, value} tuples. Defaults to [].
class (:string) - Additional CSS classes merged into the <input> element. Defaults to nil.
Global attributes are accepted. HTML attributes forwarded to autocomplete_input/1. Supports all globals plus: ["phx-change", "phx-debounce", "placeholder", "disabled", "required", "readonly"].