Let people narrow a collection while keeping the active criteria and their effects visible.
Filtering restricts a collection by known attributes, such as ownership or status. Use it when people can identify useful criteria without knowing a search phrase. Keep filters close enough to the results that the relationship remains clear.
Use Picker for one selected value, SegmentedControl for a compact set of mutually exclusive values, and labeled Toggle checkboxes for independent choices. Each control supplies a value interaction; the application combines criteria and applies them to data.
Picker uses value and onChange with item values. SegmentedControl uses the same string value shape with its supported Item children. Toggle uses checked and a boolean change callback. Do not pass an array to a single-value Picker and assume it provides multiple selection.
Use a Button for “Clear filters” or “Apply filters.” If filters live in a temporary surface, choose its presentation using the Dialogs pattern, then keep draft filter values in application state.
| Mode | Appropriate use | State ownership |
|---|---|---|
| Immediate | Changes produce quick, understandable results | Update applied criteria after each choice |
| Apply explicitly | Several choices form one request or updates are expensive | Keep draft criteria separate until Apply |
Make the mode visible. In an explicit flow, Cancel discards draft changes and retains applied criteria. Clearing filters must state whether it changes results immediately or resets only the current draft.
Figure in preparation
Filtering: component composition
Single-choice and independent criteria applied to a project list.
For a project list, “Status: All” is a useful explicit reset value alongside “Active” and “Archived.” If criteria combine with search, keep the query visible and explain whether “Clear filters” also clears it. Prefer separate actions when those effects would otherwise be surprising.
Keep available options separate from selected values. If a selected option becomes unavailable, explain the change rather than silently selecting a different option. For asynchronous filtering, ignore stale responses and preserve the applied criteria on failure.
No matches does not mean the collection contains no data. Show the active restrictions and a useful way to broaden them. If the request fails, retain the criteria and offer retry instead of reporting an empty collection.
Name the attribute, such as “Project status,” rather than labeling every control “Filter.” Summarize applied criteria using text, not only color. Use predictable ordering for options and explicit labels for resets.
Keep focus on the control while results change and announce the outcome without reading the entire collection. Test keyboard selection, long labels, and returning from a temporary filter surface. A result update should not unexpectedly move people to the start of the page.
Read Picker, SegmentedControl, Toggle, and Button. Use Search for combined query behavior and Empty states for no matches.