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. The page passes its value through readonlyValues, keyed by
the filter's key; it is never read from or written to the URL. A value can be
a promise, such as one passed down from a server component, and only that
filter's pill waits for it. Add a note to explain the context in a hover card.
Persistent filters
Set persistent on a filter that belongs to the page rather than to something
users opt into. Its pill is always in the bar and has no remove button.
Persistent filters render ahead of every other pill and suggestion, in the order
they are passed to params.
A persistent filter is still editable — open its pill to change the value — but
it cannot be turned off, so its options leave out the empty value: there is no
All Environments entry to clear it with. Give it a default so the pill
always reads as a real selection rather than an unfiltered label.
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?