Components Search input

Search input

The list-filter search box — an sr-only label + leading Search icon inside a rounded, surface-container input that debounce-submits its enclosing <form method="get"> on input, so the live filter + sort travel together. Absorbs the ~15 hand-rolled copies that each repeated the same relative-wrapper + absolute icon + type="search" + p-2 pl-9 markup.

<koala-search-input>

Canonical

<form method="get" class="md:w-80">
    <koala-search-input for="Query" placeholder="Find a client…" />
</form>

Bind for to the list page's query property — the helper pulls the input's name, id and current value from the model. The outer sizing wrapper (md:w-80) stays at the call site; the helper owns the label, icon, chrome and the debounced submit.

Variants

3 variants

Model-bound

for="Query"

Explicit name + value

name + value + label

No auto-submit

submit-on-input="false"

<form method="get">
    <koala-search-input name="Query" value="@Model.Query" placeholder="Search invoices…" label="Search invoices" />
</form>

Use name + value when there's no model property to bind — e.g. a search that reads its current value from a query string. Set label to give the sr-only label meaningful text for screen readers.

Manual submit

Set submit-on-input="false" for the rare case a search shouldn't debounce-submit on every keystroke — e.g. an expensive query, or one paired with an explicit Search button. The input then only submits when the user presses Enter (native type="search" behaviour) or clicks the button.

<form method="get">
    <koala-search-input name="Query" placeholder="Type, then press Enter…" submit-on-input="false" />
    <button type="submit" koala-btn="Primary">Search</button>
</form>

Props

7 attributes

Attribute	Values	Notes
for	Model expression	Binds the search to a model property — supplies the input's `name`, `id` and current `value`. Prefer this over explicit `name`/`value`.
name	string?	Explicit field name, used when not binding via `for`. Defaults to `Query`.
value	string?	Explicit current value, used when not binding via `for`.
placeholder	string	Input placeholder. Defaults to `Search…`.
label	string	Visually-hidden (`sr-only`) label for accessibility. Defaults to `Search`.
submit-on-input	bool	Debounce-submit the enclosing form 300ms after input. Default `true`; set `false` to submit only on Enter / explicit button.
class	string?	Extra classes appended to the relative wrapper (e.g. for spacing). Width belongs on the call-site sizing wrapper, not here.

Do & don't

Do Wrap the search in a

Don't Don't set the width on the helper itself or hand-roll the icon + relative wrapper — that's exactly the duplication this helper replaces.