UI recipe · Version 1.0.0 · 5 min read
Search, refine and recover from no results
Connect input, filters, loading, results, clarification and recovery without dropping explicit constraints.
Direct answer
Keep the request and active filters visible. Treat missing context, zero matches and an unavailable service as different situations, each with an actionable next step. Only the user can choose to relax a constraint.
Sources and revision
- Updated
- Revision
- 2026-09-16 · bd6df09922ad
- Sources
- 2 sources
- Status
- Published
Connect and try
Version 1.0.0
- Search field
Let someone state a need and explicitly submit it.
- Checkbox
Narrow the results with an explicit, reversible filter.
- Spinner
Indicate pending work with readable text, without inventing a progress percentage.
- Inline alert
Distinguish a failed request from a successful search with no matches.
What this recipe does not cover
Three fictional destinations, matched locally by city name. This is not a travel service or the atlas search engine. Query and filter stay in page memory. The simulated outage sends no request. Removing a filter requires your action; an empty result never silently relaxes it. No ranking, availability, price or booking is promised.
Instruction to adapt
Fixed editorial text, separate from Packs. Read the limits above before using it; execution is not guaranteed.
Build a search journey with a labelled search field, an explicit submission and a reversible Train only checkbox. Preserve the query and every explicit filter during loading, failure and retry. Ask for a city when the request is empty. Disable duplicate submissions while pending and announce the result count. For no matches, keep the constraints visible and offer editing the query or explicitly removing the filter. Distinguish no matches from service failure; retry without clearing input. Verify a matching city, an incompatible filter, no city, an outage and recovery at 320 px and by keyboard. Use real service data only through a separately verified integration; do not claim availability from this local example.
In this guide
01
1. State the need
Enter Porto in the example. A Search field names the request; submitting an empty field instead asks for a city. This is clarification, not a claim that the city is unsupported.
02
2. Refine explicitly
Select Train only. The Checkbox is a constraint, not a preference to ignore. Search Porto: there are no matches in this fictional dataset. Keep the query and filter visible.
03
3. Explain waiting and results
While pending, readable loading text accompanies the Spinner role and submission is disabled. When complete, announce the count. A successful request may return zero results; explain how to edit the query or explicitly remove the filter.
04
4. Recover without losing context
Simulate an outage, submit and observe an Inline alert. Turn the outage off and retry: the query and filter remain. Remove Train only explicitly to recover Porto, or change the city to Paris while preserving the filter. Verify which constraint changed.
Keep this
What to verify
- 01Blank submission asks for a city and focuses the field.
- 02Porto + Train only gives zero matches without relaxing the filter.
- 03Failure and retry preserve input; removing the filter explicitly restores a result.
Primary sources
Technical claims in this guide connect to first-party specifications and documentation.
Continue