File Search Results
A file search panel with a query field, removable filter chips, a result count, and rows with highlighted matches, paths, size, and dates.
A file search panel with a query field, removable filter chips, a result count, and rows with highlighted matches, paths, size, and dates.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
File Search Results is the results view for a workspace file search. A labeled Search field holds the active query, brand, followed by three removable filter chips for type, owner, and modified range, and a Clear all button. A count line reads 5 results for brand in Acme Workspace. Five result rows follow, each with a type icon, a name that highlights the matched substring, a folder path, and right-aligned size and modified columns. One document result adds an in-content snippet with the match highlighted inside a sentence.
Results are one typed array that splits each name into pre, match, and post parts, so the highlight is markup rather than a fragile string search. The optional snippet uses the same three-part shape for in-content matches.
Reach for this block as the results surface behind your file search, wired to a search index that returns the matched range per hit. Debounce the query and keep the filter chips in sync with the active facets.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the file search results list. Other result shapes:
Tip: highlight the matched substring, a query echoed in every result name proves the search understood the ask.