SearchBox

Search the built site with a native input and Pagefind-powered results.

SearchBox

View source · API reference

Search requires a generated Pagefind index and the standard search runtime. This site enables indexing so the preview searches real documentation.

Search the component guides

Try “virtual”, “checkbox” or “variant”, then follow a matching result.

<SearchBox tone="neutral" variant="surfaceAlt" />

Behavior and accessibility

Pagefind indexes the built HTML, so new content appears after a successful indexed build. SearchBox does not fetch application records or replace autocomplete. Keyboard behavior and results are provided by the standard Pagefind search runtime.

API reference

SearchBox contract

Props below are the public template API. RefOrValue accepts a literal or a reactive ref; bind refs with a colon-prefixed attribute. Native attributes and events can be passed through the component root.

tone

RefOrValue<SemanticTone>
Default
inherited

Semantic intent: neutral, accent, secondary, info, success, warning, danger, feature, custom or ghost. The active skin supplies the colors.

variant

RefOrValue<ComponentVariant>
Default
inherited FormInputField surfaceAlt

Visual treatment. Accepts solid, surface, surfaceAlt, spotlight, glass, flat, flatAlt, flatSolid, outlineFill, outline, subtle, subtleBtn, link, sheen, underline, rail, bracket or none.

placeholder

RefOrValue<string>
Default
Search + site title

The current component derives its placeholder from site.siteTitle. The registered placeholder prop is not read by the resolver.

Composition

No slots. Register defineSearchComponents with FormInputField and Icon. Enable site.pagefind.enabled and serve the generated Pagefind assets alongside the site.

Site configuration

{
  "pagefind": {
    "enabled": true,
    "excludePaths": []
  }
}