Search With Recent

About this block

Search With Recent renders the open state of a global search input with its suggestion panel below: three recent searches (API rate limit exceeded, payment webhook 503, invite email Priya Nair), two suggested filter shortcuts displayed as filter chips with their query strings (status:open owner:me and priority:high label:bug), and a tip line explaining the owner: and label: prefix syntax. The panel connects to the input via a flush border so it reads as one surface.

Recent and suggested items are const arrays. The tip row teaches the power-user shortcut without a help article; it is the difference between a search box and a filter system that gets used.

When to use

Reach for this block as the search affordance on any app page that has filterable content, wired to a recent-search store and your filter preset collection. It is lighter than a command palette and faster for repeat searches.

A natural flow around it on an Application Pro page:

Before

• App shell
• Navigation

After

• Filter chips row
• Data table

What you can display

One strong use is the global search on an issues page. Other search-with-recent patterns:

• Customer search. Recent accounts plus suggested filters for plan and region.
• Doc search. Recent pages plus suggested topic shortcuts.
• Command-lite. Same shell but the suggested section lists frequent actions instead of filter presets.

Tip: limit recent searches to three or four items; a longer list turns a quick panel into a scroll surface.