AvenUI.Components.Combobox (AvenUI v1.0.0)

Copy Markdown View Source

Combobox — searchable select input.

Filtering happens server-side via phx-change on the search input. Open/close state is managed by a lightweight JS hook (AvenUICombobox). Works as a drop-in replacement for a plain <select> in any LiveView form.

Examples

<%!-- Basic — static options --%>
<.combobox
  id="country"
  name="country"
  placeholder="Search countries…"
  options={[
    %{value: "th", label: "Thailand"},
    %{value: "sg", label: "Singapore"},
    %{value: "jp", label: "Japan"},
  ]}
  selected={@selected_country}
/>

<%!-- With live search — filter on server --%>
<.combobox
  id="user-search"
  name="user_id"
  placeholder="Search users…"
  options={@filtered_users}
  selected={@selected_user}
  on_search="search_users"
/>

<%!-- With Phoenix form field --%>
<.combobox
  id="role"
  field={@form[:role]}
  placeholder="Select role…"
  options={[
    %{value: "admin", label: "Admin"},
    %{value: "editor", label: "Editor"},
    %{value: "viewer", label: "Viewer"},
  ]}
/>
def handle_event("search_users", %{"query" => query}, socket) do
  users = Accounts.search_users(query)
  {:noreply, assign(socket, :filtered_users, users)}
end

Option format

Options can be a list of maps:

%{value: "th", label: "Thailand"}
%{value: "th", label: "Thailand", disabled: true}

Or a list of {label, value} tuples:

[{"Thailand", "th"}, {"Singapore", "sg"}]

Summary

Functions

combobox(assigns)

Searchable combobox — drop-in replacement for a select field.

Functions

combobox(assigns)

Searchable combobox — drop-in replacement for a select field.

Attributes

  • id (:string) (required)
  • name (:string) - Defaults to nil.
  • field (Phoenix.HTML.FormField) - Defaults to nil.
  • options (:list) - Defaults to [].
  • selected (:any) - Defaults to nil.
  • placeholder (:string) - Defaults to "Search…".
  • on_search (:string) - phx-change event name for server-side filtering. Defaults to nil.
  • disabled (:boolean) - Defaults to false.
  • required (:boolean) - Defaults to false.
  • label (:string) - Defaults to nil.
  • hint (:string) - Defaults to nil.
  • error (:string) - Defaults to nil.
  • class (:string) - Defaults to nil.
  • Global attributes are accepted.