Filter Params

A URL-backed filter bar with searchable filter selection.

Default

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 FilterParamsBar for 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?

supported.