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

Search input component with icon, optional clear button, and shortcut badge.

Provides `search_input/1` — a styled text input with a magnifier icon on the
left, an optional × clear button, and an optional keyboard shortcut badge
(e.g. `⌘K`). Supports three visual variants: `:default`, `:minimal`, `:ghost`.

Also provides `form_search_input/1` for form-integrated search with label,
description, and changeset error display.

## Variants

- `:default` — bordered input with background (standard form use)
- `:minimal` — no border, muted fill, for search bars inside containers
- `:ghost` — fully transparent until focused, for toolbar search

## Basic usage

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

    <%!-- With command palette shortcut hint --%>
    <.search_input
      name="q"
      value={@query}
      placeholder="Search..."
      shortcut="⌘K"
    />

    <%!-- With clear button and custom variant --%>
    <.search_input
      name="q"
      value={@query}
      placeholder="Filter..."
      variant="minimal"
      on_clear="clear_search"
    />

## Handling clear

When `:on_clear` is set, the × button fires a `phx-click` event. Handle it
server-side to reset the search value:

    def handle_event("clear_search", _params, socket) do
      {:noreply, assign(socket, query: "")}
    end

# `form_search_input`

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

Wraps `search_input/1` with a `<label>` (when `:label` is given) and error
`<p>` elements sourced from `field.errors`.

## Examples

    <.form_search_input field={@form[:query]} label="Search products" />

## 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`.
* `variant` (`:string`) - Visual style. Defaults to `"default"`. Must be one of `"default"`, `"minimal"`, or `"ghost"`.
* `shortcut` (`:string`) - Keyboard shortcut badge. Defaults to `nil`.
* `on_clear` (`:string`) - LiveView event name for the × clear button. Defaults to `nil`.
* `class` (`:string`) - Additional CSS classes for the wrapper. Defaults to `nil`.
* Global attributes are accepted. HTML attributes forwarded to the inner `search_input/1`. Supports all globals plus: `["phx-change", "phx-debounce", "phx-keydown", "disabled", "placeholder", "autocomplete"]`.

# `search_input`

Renders a search input with a magnifier icon, optional × clear button, and
optional keyboard shortcut badge.

The layout is a relative wrapper containing:
1. A left-aligned magnifier icon
2. The styled `<input type="search">`
3. (optional) × clear button firing `:on_clear`
4. (optional) shortcut `<kbd>` badge on the right

## Examples

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

    <.search_input name="q" value={@q} shortcut="⌘K" placeholder="Jump to..." />

    <.search_input name="q" value={@q} on_clear="clear_q" variant="minimal" />

## Attributes

* `id` (`:string`) - HTML id for the `<input>`. Auto-generated if nil. Defaults to `nil`.
* `name` (`:string`) - HTML name attribute forwarded to `<input>`. Defaults to `"search"`.
* `value` (`:string`) - Current input value. Defaults to `nil`.
* `placeholder` (`:string`) - Placeholder text shown when the input is empty. Defaults to `"Search..."`.
* `variant` (`:string`) - Visual style — `default`, `minimal`, or `ghost`. Defaults to `"default"`. Must be one of `"default"`, `"minimal"`, or `"ghost"`.
* `shortcut` (`:string`) - Keyboard shortcut badge displayed inside the input (e.g. `"⌘K"`). Defaults to `nil`.
* `on_clear` (`:string`) - LiveView event name fired when the × clear button is clicked. Defaults to `nil`.
* `disabled` (`:boolean`) - Disables the input and clear button. Defaults to `false`.
* `class` (`:string`) - Additional CSS classes merged into 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-keydown", "phx-debounce", "autofocus", "autocomplete"]`.

---

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