Filter Params
A URL-backed filter bar with searchable filter selection.
Suggestions
Provide a suggestion for filters that have a useful starting value. Suggestions
remain optional until users select them.
AI
Pass an ai callback to offer natural-language filter suggestions. This example
simulates a request and always applies the Production environment filter.
Readonly filters
Use a readonly filter for page context that should be visible but cannot be
changed or removed. It still uses encode and decode, so its value is
available through useFilterParam and can be restored optimistically on
refresh. onLoad supplies the authoritative value when the bar renders. Add a
note to explain the context in a hover card.
Best Practices
When to use
- Use
FilterParamsBarfor list and search pages where the active constraints should be visible, linkable, and preserved on refresh. - Keep filter names short and use option labels that explain the selected value without requiring users to reopen the menu.
Behavior
- Encode only the URL parameters owned by each filter so removing a pill does not clear unrelated page state.
- Provide suggestions only when they are useful defaults, not as replacements for filters users have explicitly selected.
Accessibility
- Make filter labels and option labels specific enough to identify the constraint and selected value when announced by a screen reader.
Was this helpful?