Search

Open a command-palette style search dialog from a compact trigger. Result data is supplied by the caller.

Usage Example

@search.Search(search.Config{
    ID:          "component-search",
    Label:       "Search",
    Placeholder: "Search docs...",
    Items: []search.Item{
        {Title: "Sidebar", Description: "Navigation with grouped sections.", Href: "/components/sidebar", Section: "Navigation"},
        {Title: "List teams", Description: "Operation result with method and route metadata.", Href: "/api/teams", Kind: "Operation", Method: "GET", Path: "/teams", Section: "API"},
        {Title: "KBD", Description: "Semantic keyboard shortcuts.", Href: "/components/kbd", Section: "Display"},
    },
})

Custom Results

Use Item fields and Attrs to decide where results navigate and how they integrate with the host app.

Custom Results

@search.Search(search.Config{
    ID:           "custom-search",
    Label:        "Search patterns",
    Placeholder:  "Try form, modal, or nav",
    ShortcutText: "Ctrl K",
    Items: []search.Item{
        {Title: "Form controls", Section: "Guide", Keywords: []string{"input select checkbox"}},
        {Title: "Overlay flows", Section: "Guide", Keywords: []string{"modal drawer search"}},
    },
})

Remote Results

Load result records from a JSON endpoint, then filter and navigate in the browser.

Remote Results

@search.Search(search.Config{
    ID:          "remote-search",
    Label:       "Remote search",
    Placeholder: "Search fetched results",
    ItemsURL:    "/api/components/search/items",
})

API Reference

Prop	Type	Default	Description
`ID`	`string`	`"search"`	Unique id used for the root, dialog, input, and label relationships.
`Label`	`string`	`"Search"`	Accessible label and trigger text.
`Placeholder`	`string`	`"Search"`	Placeholder shown in the dialog input.
`ShortcutText`	`string`	`"⌘ K"`	Keyboard hint rendered in the trigger KBD.
`GlobalShortcut`	`bool`	`false`	When true, Cmd/Ctrl+K opens this search instance.
`EscapeText`	`string`	`"Esc"`	Keyboard hint rendered beside the dialog input.
`Items`	`[]Item`	`nil`	Caller-provided result records. The component only filters and displays them.
`ItemsURL`	`string`	`""`	JSON endpoint for client-loaded result records. When set, records are fetched and only visible matches are rendered.
`MaxResults`	`int`	`4`	Maximum number of visible matches.
`DescriptionMaxLength`	`int`	`120`	Maximum visible description length before truncation.
`EmptyText`	`string`	`"No results found."`	Message shown when the current query has no matches.
`RootClass`	`string`	`""`	Extra classes on the root element.
`TriggerClass`	`string`	`""`	Extra classes on the trigger button.
`DialogClass`	`string`	`""`	Extra classes on the dialog panel.
`InputAttrs`	`templ.Attributes`	`nil`	Additional attributes on the search input.

Palette Select