PhiaUi.Components.ClearableInput (phia_ui v0.1.17)

Copy Markdown View Source

Text input with an inline × clear button.

Provides clearable_input/1 — a text input that renders a × button on the right side when the current value is non-empty. Clicking the button fires a server event (:on_clear) which the LiveView handles to reset the value.

Also provides form_clearable_input/1 for changeset-integrated fields with label, description, and error messages.

When to use

Use clearable_input/1 when users need a quick way to empty a field — filter inputs, tag inputs, search boxes, or any single-line field where removing the current value is a frequent action.

Basic usage

<.clearable_input
  name="filter"
  value={@filter}
  placeholder="Filter by name..."
  on_clear="clear_filter"
  phx-change="filter_changed"
  phx-debounce="300"
/>

Handling clear

def handle_event("clear_filter", _params, socket) do
  {:noreply, assign(socket, filter: "")}
end

Form-integrated

<.form_clearable_input
  field={@form[:username]}
  label="Username"
  on_clear="clear_username"
/>

Summary

Functions

clearable_input(assigns)

Renders a text input with an inline × clear button.

form_clearable_input(assigns)

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

Functions

clearable_input(assigns)

Renders a text input with an inline × clear button.

The × button is rendered only when :value is non-empty AND :on_clear is set. Clicking it fires the LiveView event named by :on_clear. The LiveView is responsible for resetting the field value, which causes the button to disappear on re-render.

Examples

<.clearable_input name="q" value={@q} on_clear="clear_q" phx-change="search" />

<.clearable_input name="email" value={@email} type="email" placeholder="you@example.com" />

Attributes

  • id (:string) - HTML id for the <input>. Auto-generated if nil. Defaults to nil.
  • name (:string) - HTML name attribute. Defaults to nil.
  • value (:string) - Current input value. Defaults to nil.
  • type (:string) - HTML input type (text, email, tel, url, search). Defaults to "text".
  • placeholder (:string) - Placeholder text shown when empty. Defaults to nil.
  • on_clear (:string) - LiveView event name fired when the × button is clicked. Defaults to nil.
  • disabled (:boolean) - Disables the input and hides the clear button. Defaults to false.
  • class (:string) - Additional CSS classes merged into the <input> element via cn/1. Defaults to nil.
  • Global attributes are accepted. HTML attributes forwarded to the <input> element. Supports all globals plus: ["phx-change", "phx-debounce", "phx-keydown", "autocomplete", "required", "readonly", "autofocus"].

form_clearable_input(assigns)

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

Examples

<.form_clearable_input field={@form[:username]} label="Username" on_clear="clear_username" />

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.
  • on_clear (:string) - LiveView event name for the × clear button. Defaults to nil.
  • class (:string) - Additional CSS classes merged into the <input> element. Defaults to nil.
  • Global attributes are accepted. HTML attributes forwarded to clearable_input/1. Supports all globals plus: ["phx-change", "phx-debounce", "autocomplete", "placeholder", "disabled", "required", "readonly", "type"].