Filtering & Sorting
Help people narrow a collection and understand the order of its results
Show the applied filters and current sort order beside the collection they control. People should be able to tell why a result is present, remove one restriction, or return to the full collection.
Start with the full collection. The count describes the results currently on screen.
Illustrative example · Reduced motion: choose a state to compare.Make the current query visible
Start with a Filter control and show each applied condition as a readable statement, such as “Type is Person.” Use Chip for a compact removable summary where appropriate. Give the remove action a specific accessible name, such as “Remove Type filter.”
Keep the selected sort field and direction visible. SortMenu can present the options. Use concrete labels such as “Name, A–Z” or “Updated, newest first.” Apply a stable secondary order when values are equal so rows do not appear to move at random.
Applying changes
| Situation | Suggested behavior |
|---|---|
| A small, local collection | Update results as each condition changes. |
| An expensive remote query | Let people edit several conditions and choose Apply. |
| A request is still running | Keep the selected conditions visible and show progress by the results. |
| A newer query replaces an older one | Display only the results for the latest query. |
If filters change a paginated collection, return to a valid page. Preserve selection only when its meaning remains clear. Store a shareable view's filters and sort order in its URL, excluding private values that should not appear there.
Empty and failed results
Distinguish “No results match these filters” from “No entities yet.” In the first case, retain the applied conditions and offer Clear filters or a useful change. See Empty states.
When a request fails, preserve the query and offer Retry. Keep any previous results visibly identified as the previous view until the request succeeds. Avoid showing a zero count as though the query completed.
Check keyboard access to every condition, removal, and sort option. Announce the completed result count without moving focus away from the control being edited.
Last updated on 2026-10-31
Was this page helpful?