PhiaUi.Components.SearchInput (phia_ui v0.1.17)

Copy Markdown View Source

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

Summary

Functions

form_search_input(assigns)

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

search_input(assigns)

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

Functions

form_search_input(assigns)

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(assigns)

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