PrimitivesSelect & inputSearch

Search

Find records with the same pill, icon and focus treatment as mega search. Use it with an ordinary form, or connect it to an application-owned endpoint and results region for live search.

<koala-search-input>

Form search

Submits its enclosing form after a short debounce

Live results

The shared component owns the search field, debounce and loading state. The application endpoint owns permission checks, searching its DTOs and rendering results, so one search can safely combine different collections.

search-url + results-id

Search by client name, email, transaction reference or address.

Selected values

Composite pickers keep selected values and the editable query inside one search surface. The box supplies the icon, pill, focus state and wrapping; each token remains independently removable.

Search box + tokens

Sizing

Md (default)

Client-scripted results

The third mode, for search surfaces whose results live in Alpine state rather than a server-rendered region: input-expression runs a caller-supplied statement on each (debounced) keystroke, and loading-expression drives the box's spinner from the enclosing scope. The input renders no name/id in this mode, so it is safe to stamp inside an x-for. The host still owns everything about the search — Portal's address finder (_QuoteOnboardingAddressFinder.cshtml) composes this mode with a .koala-result-menu of suggestions. This demo stubs that shape with a fixed address list — try "Fargate" or "Sheffield".

input-expression + loading-expression

Applied:

API

for ModelExpression

name / value string

placeholder string (default Search…)

label string (screen-reader label, default Search)

size XsSmMdLg (default Md)

submit-on-input bool (default true)

search-url string? (remote results endpoint)

results-id string? (remote replacement target)

collapse NeverMobile

Always (default Never) — collapse to an icon and expand over the row; Always for a row that is narrow at every width, such as a panel band

autofocus bool

x-model string?

class string?

koala-search-box size XsSmMdLg (default Md)

koala-search-box width AutoBlock (default Block)

koala-search-token selected value + remove action

input-expression string? (client-scripted mode: JS run on debounced input; excludes search-url; input renders no name/id)

loading-expression string? (client-scripted mode: JS expression that shows the spinner)