## When to use

Whenever a product surfaces a search input, three secondary surfaces follow: results below the input, recents shown when the input is focused but empty, and saved views (when users curate queries). Most products use all three; smaller products skip saved views.

## Result list

Flat ranked list. Each row carries a title, snippet, meta (author / date / type), and an optional trailing action. `list-ui` + `list-item-ui` with `tag-ui` for the type.

42 results for "OKLCH tokens" Sorted by relevance · 0.18s
"…all colors must reference --a-chrome-*, --a-data-0..9, or semantic tokens. Zero raw oklch in component CSS…" Spec "…OKLCH-with-transparent red-shift bug fixed in Safari 18.0 (ADR-0007); we use oklab for color-mix instead…" Journal "--a-primary-bg: oklch(64% 0.18 245); --a-primary-fg: oklch(98% 0.01 245)…" Code "…OKLCH ramps that satisfy contrast, hue-stability, and perceptual-evenness…" Skill

## Grouped results

Sectioned by type when the catalog is heterogeneous (Documents / People / Projects). Each group shows top 3–5; "See all in {group}" links to a filtered view.

"kim" Across people, documents, and projects
People · 3 Kim Granlund kim@example.com · Owner Kim Park kim.park@example.com · Member Documents · 12 Kim's onboarding plan Edited 2 hours ago · by Avery Kimchi recipe — team lunch Edited 4 days ago · by Jordan Projects · 1 Kim's H2 roadmap Updated yesterday · 5 active items

## Recent searches menu

Popover that appears when the search input is focused but empty. Recent queries with most-recent-first ordering, a "Clear" action in the footer. Each row reruns the query on click; trailing icon dismisses a single entry.

Recent

## Saved views

List of curated queries the user has named and pinned. Each row shows the view name, a short description (or active filter chips), last-run time, and edit/share/delete actions. Used for "My open issues", "Q2 customer escalations", etc.

Saved views 5 views · last edited 2 days ago
My open issues assignee=me status=open 12 results · 3 min ago Q2 customer escalations label=customer priority=p1 created≥2026-04-01 7 results · today Stale PRs type=pr updated<30d status=open 23 results · 1 hour ago Recent docs from team type=doc author∈team edited≤7d 31 results · 4 hours ago

## Composition rules

- Result count + timing in the header — "42 results · 0.18s" reads as "the search worked"; bare lists feel uncertain.
- Snippets quote the source, not paraphrase — surrounding the matched term in the actual text builds trust faster than a synthesized summary.
- Group when the catalog is heterogeneous — flat is fine if all results share a type; group when "people / docs / projects" all share a query.
- Recents are queries, not results — clicking a recent re-runs the search, it doesn't open the previous result. The semantic distinction matters.
- Filter chips inside saved-view rows replace prose — "type=pr · updated<30d" is faster to scan than "Pull requests updated in the last 30 days".
- Saved views are user-named — the system never auto-generates a name. "Untitled view" is the placeholder; users rename or discard.

## See also

- search-ui — input primitive (debounce, default, name, placeholder, value).
- list-ui · list-item-ui — result-row anatomy.
- menu-ui — recents menu surface.
- command-ui — Cmd+K palette (sibling to search).
- filter-bar — runtime filter system; saved views are persisted filter sets.
- empty-state-ui — for "no results" surface.