Custom select (select-only combobox) and editable combobox with autocomplete.
Summary
Functions
Renders an editable combobox with autocomplete.
Renders a custom select. The selection lives in a hidden native <select>,
so it submits with the form and triggers phx-change like any input.
Functions
Renders an editable combobox with autocomplete.
Client-filtered (static options):
<.combobox field={@form[:country]} label="Country" options={@countries} />Server-filtered: pass on_search (an event name) and update options in
your handle_event/3. The hook pushes %{"query" => text} as the user types.
<.combobox field={@form[:city]} label="City" options={@cities} on_search="search-city" loading={@searching} />The committed value lives in a hidden input named name; the visible text
input is named "#{name}_query" when on_search is set so it never
collides with your schema field. Set allow_custom to accept free text as
the value.
Attributes
id(:any) - Defaults tonil.name(:any)value(:any)label(:string) - Defaults tonil.description(:string) - Defaults tonil.placeholder(:string) - Defaults tonil.options(:list) (required)field(Phoenix.HTML.FormField)errors(:list) - Defaults to[].on_search(:string) - event pushed with %{query: text}; enables server filtering. Defaults tonil.loading(:boolean) - Defaults tofalse.allow_custom(:boolean) - Defaults tofalse.multiple(:boolean) - select several values; each submits as name[]. Defaults tofalse.empty(:string) - defaults to "No matches". Defaults tonil.size(:string) - Defaults to"md". Must be one of"sm","md", or"lg".disabled(:boolean) - Defaults tofalse.required(:boolean) - Defaults tofalse.style(:string) - inline style for the field wrapper. Defaults tonil.class(:any) - Defaults tonil.- Global attributes are accepted. Supports all globals plus:
["phx-target", "autocomplete"].
Renders a custom select. The selection lives in a hidden native <select>,
so it submits with the form and triggers phx-change like any input.
<.select field={@form[:role]} label="Role" placeholder="Pick a role"
options={[{"Admin", "admin"}, {"Editor", "editor"}]} />
<.select name="tags[]" value={["a", "b"]} label="Tags" multiple options={~w(a b c)} />Options are {label, value} tuples or plain strings. Keyboard follows the
WAI-ARIA select-only combobox pattern: arrows, Home/End, type-ahead,
Enter/Space select, Escape closes.
Attributes
id(:any) - Defaults tonil.name(:any)value(:any)label(:string) - Defaults tonil.description(:string) - Defaults tonil.placeholder(:string) - defaults to "Select…". Defaults tonil.options(:list) (required)multiple(:boolean) - Defaults tofalse.field(Phoenix.HTML.FormField)errors(:list) - Defaults to[].size(:string) - Defaults to"md". Must be one of"sm","md", or"lg".disabled(:boolean) - Defaults tofalse.required(:boolean) - Defaults tofalse.style(:string) - inline style for the field wrapper. Defaults tonil.class(:any) - Defaults tonil.- Global attributes are accepted.