# `PhiaUi.Components.InlineSearch`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/inputs/inline_search.ex#L1)

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>

# `inline_search`

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"]`.

---

*Consult [api-reference.md](api-reference.md) for complete listing*