PrimitivesSelect & inputSearch

Search

Find records with the same pill, icon and focus treatment as mega search. The caller authors the native search field, binding and transport; the component owns its chrome and search-specific interaction states.

<koala-search-input>

Form search

Caller-owned debounced form submission

Live results

The page owns the request, loading state and replacement target. The component renders the field and reflects the page's loading state.

Caller-owned results request

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

A caller can listen for the native input event, bind its query, and provide a loading state. The component does not know what is searched or where results are rendered. 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".

Caller-owned client results

Applied:

API

label string (screen-reader label, default Search)

size XsSmMdLg (default Md)

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

loading Alpine expression? (trailing spinner state)

class string?

input koala-search-field caller-authored type=search input; owns name, value, placeholder, disabled, autofocus and bindings

koala-search-box size XsSmMdLg (default Md)

koala-search-box width AutoBlock (default Block)

koala-search-token selected value + remove action