Use sort controls to change the order of the current result set, filter chips or panels to change which items are included, and pagination to move through slices of the same ordered set.
Use sort controls to change the order of the current result set, filter chips or panels to change which items are included, and pagination to move through slices of the same ordered set.
Practice the judgment: Imagine this situation: Changing sort silently clears the current search query, active filters, selected view, or page size. Write the person's goal, choose one of these patterns, and show the state that helps the person continue. Use the decision rules and source trail below to explain your choice.
Review the underlying principle →| Dimension | Sort controls | Filter chips | Filter panel | Pagination |
|---|---|---|---|---|
| UI or UX | UI + UX - Control for changing the order of an existing result set | UI + UX - Compact chip set for toggling or removing result filters | UI + UX - Grouped filter control panel for narrowing a current result set | UI + UX - Paged navigation control |
| UI guidance | Place the active sort control above or inside the result region it affects, with a visible label such as Sort by and an option name that includes both the attribute and direction. | Render filter chips as a compact set of short, consistently styled controls near the content they filter, with clear selected, unselected, focused, disabled, and removable states. | Render filter categories as labelled form controls in a panel adjacent to the result set on wide layouts, with a visible result count and active-filter summary near the results. | Render a labeled pagination nav near the affected results with current page, previous, next, nearby pages, optional first/last or ellipsis, and clear disabled edge states. |
| UX guidance | Use sort controls when users need to rearrange the same matching results by a meaningful attribute while preserving the current search query, filters, page size, and view context. | Help the person reach a clear task outcome. | Use a filter panel to help users narrow the current list or search result set while preserving orientation, search query, sort order, pagination context, and selected values. | Help users move through an ordered result set with a stable sense of position, progress, and returnability. |
| Good UI | A search results page shows Sort by with options like Relevance, Due date (oldest first), and Amount (highest first) above the results. | A search results page shows chips for Open, Urgent, Appeals, and Benefits below the search box, with selected chips using a checkmark and stronger background. | A desktop search page shows a left filter panel with Status, Type, and Date groups, while active chips and the result count sit above the results. | Current page, previous/next, disabled edges, page numbers, result range, and total count are visually clear. |
| Bad UI | A menu labelled Sort contains Status: Open, Last 30 days, and Owner, which are filters rather than ordering rules. | A single pill labelled Filter sits alone and behaves like a vague button. | A panel mixes filter options, navigation links, sort controls, and saved views under one Filters heading. | Pagination jumps around as pages load or separates controls from the result list. |
| Good UX | A user searches for case, changes Sort by from Relevance to Due date (oldest first), and the same filtered records reorder while the query and filters remain. | A user tabs to Status: Open, presses Delete, and focus moves to the next applied chip while the result summary updates. | A user selects Status: Open and Type: Appeal, applies the batch, lands back at the result summary, and sees 12 records with both criteria removable. | Users move through pages while query, filters, and sort persist. |
| Bad UX | Changing sort clears the search box and removes active filters. | Tapping a chip changes the page route and clears the result context. | Applying a filter silently resets the query, sort order, current page, and view density. | Changing page resets filters. |
| Best fit | Users need to compare or act on a result set in different orders. | A few common filters should stay visible and directly toggleable near the content. | Users need to narrow the current search results, browse results, table, card grid, or list by multiple criteria. | The collection has many ordered results. |
| Avoid when | Users need to narrow which records are shown rather than change their order. | There are many criteria, ranges, dates, or grouped fields that need a panel or form. | The result set is small enough that scanning is faster than filtering. | Users need uninterrupted reading or comparison. |
| Required state | Default sort state that identifies the initial order and why it is appropriate. | Selected chip state with visible selected indicator and updated result count. | Applied state with active-filter count, result count, and removable applied criteria near the results. | First page with disabled previous control. |
| Accessibility burden | Use a native select, radio group, or correctly implemented menu button for standalone sort controls. | Use button semantics for interactive chips and expose selected state with aria-pressed or equivalent semantics. | Use semantic form controls with fieldsets, legends, labels, and accessible names for filter categories and values. | Use a labeled navigation region. |
| Common misuse | Putting filtering criteria such as date ranges, status, category, or owner inside a sort menu. | Using a lone chip as a generic Filter button. | Using a filter panel as a navigation drawer that sends users to different pages instead of narrowing the current data set. | Using pagination for a tiny collection. |