PhiaUi.Components.InlineSearch (phia_ui v0.1.17)

Copy Markdown View Source

Expandable search — collapses to an icon button, expands to a full input.

Provides inline_search/1 — an icon-button that reveals a text input when clicked (and collapses it back on Escape or blur). The expand/collapse is handled entirely by Phoenix LiveView JS — no server round-trip required.

When to use

Use inline_search/1 in toolbars, navigation bars, or table headers where you need search functionality without always showing an open input field. It keeps the UI clean until the user actively needs search.

Basic usage

<%!-- Default inline search bar --%>
<.inline_search
  name="q"
  value={@query}
  placeholder="Search..."
  phx-change="search"
  phx-debounce="300"
/>

<%!-- In a page header toolbar --%>
<div class="flex items-center gap-2">
  <h1 class="text-lg font-semibold">Products</h1>
  <.inline_search name="q" value={@q} phx-change="filter" phx-debounce="400" />
  <.button>New product</.button>
</div>

Summary

Functions

inline_search(assigns)

Renders a search icon button that expands to a text input on click.

Functions

inline_search(assigns)

Renders a search icon button that expands to a text input on click.

Behaviour

  1. Initially: shows a magnifier icon button.
  2. On click: the icon button hides and the input group slides in (JS).
  3. The × button inside the input collapses back to the icon.
  4. Pressing Escape from within the input also collapses it.

The JS expand/collapse does not trigger a LiveView event — it is purely client-side via Phoenix.LiveView.JS.

Example

<.inline_search name="q" value={@q} phx-change="filter" phx-debounce="300" />

Attributes

  • id (:string) - Base id used for the toggle button and input. Auto-generated if nil. Defaults to nil.
  • name (:string) - HTML name forwarded to the <input> element. Defaults to "search".
  • value (:string) - Current search value. Defaults to nil.
  • placeholder (:string) - Placeholder text shown inside the expanded input. Defaults to "Search...".
  • expanded (:boolean) - When true, renders the input in expanded state on initial render. Defaults to false.
  • width (:string) - Tailwind width class suffix for the expanded input (e.g. "48" → w-48). Defaults to "48".
  • class (:string) - Additional CSS classes on the outer wrapper. Defaults to nil.
  • Global attributes are accepted. HTML attributes forwarded to the <input> element. Supports all globals plus: ["phx-change", "phx-submit", "phx-debounce", "phx-keydown", "autocomplete"].