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

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"
    />

# `clearable_input`

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`

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

---

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