Visa Product Design System Filters Pattern
Documents filter anatomy, including categories, applied indicators, chips, clear-all controls, apply buttons, filter panels, instant filtering, batch filtering, and mobile guidance.
What this source can teach
Use this source to compare a documented solution with the task and states in your own product.
- Start with the original. Open the source and find the guidance or example relevant to your task.
- Trace the connection. Use the claim notes below to see how this site applies the source to specific patterns.
- Check the setting. Compare the source's platform, people, and constraints with your own decision.
Pattern Decisions This Source Supports
| Pattern | Supported decision | Required contract | Claim note |
|---|---|---|---|
| Filter chips | Choose filter chips when there are a few high-frequency filters that can stay visible near the result set without overwhelming scanning. | Selecting a filter chip toggles only that filter and updates the result count or result list without changing unrelated query, sort, pagination, or view state. | Visa filter guidance documents applied filter chips, active indicators, clear-all controls, and their relationship to filter panels. |
| Filter panel | Choose a filter panel when users need grouped controls for narrowing the current result set by several criteria. | Each filter category has a clear label and contains controls appropriate to the value type, such as checkboxes, radios, ranges, date fields, or text fields. | Visa guidance documents filter panel anatomy, active indicators, applied chips, clear-all controls, apply buttons, and mobile considerations. |
| Filter reset that clears unrelated search | Flag this anti-pattern when a filter reset clears or changes query text, submitted search, search scope, saved search identity, search history, sort order, page size, view mode, selected rows, or route context that is not visibly part of the filters. | Every reset control names the state it changes. | Documents active indicators, applied filter chips, clear-all controls, apply buttons, and mobile filtering considerations. |
Comparisons supported by this source
- Filter chips vs filter panel vs multi-select
Visa documents applied filter chips as part of filter anatomy and distinguishes them from filter panels and apply controls.
- Filter panel vs faceted search vs no-results recovery
Visa documents filter panel usage, active indicators, chips, clear-all controls, apply buttons, and mobile filter panel considerations.
- Filter reset that clears unrelated search vs filter panel vs basic search vs filter chips vs saved search
Supports applied chips, clear-all controls, active indicators, and filter panel reset behavior.
Evidence Role
This source is treated as pattern-library evidence. Its value comes from the specific claims and setting described above.
Publisher: Visa Product Design System. Last checked: .