Filter menu
A component used to apply category-specific filters for a dataset.
Features
- Flexible and composable API.
- Unopinionated about form elements within the filter menu.
- Display a "count" for the number of applied filters.
- Provides a companion component for grouping filter toggles.
When to use
See our filtering guidelines to learn why and when you should use this component.
Examples
Complete example
We only provide presentational components for filtering, so you'll need to:
- Keep track of interim filters.
- Apply filters (and fetch data) when appropriate.
- Indicate that filters are applied.
- Enable "Clear" and "Apply" actions when applicable.
- Persist applied filters in the URL.
Information:
Please refer to our Filtering guidelines for more details.
Specific layout for grouping filters
The Toggle component supports a moreFilters prop that will display a chevron on the right-hand side. Use it when you need to group multiple filtering options within the same filter menu. See our Filtering layout guidelines for more details.
Toggle loading state
Toggle component supports loading state via loading prop. Use it when applied filters are being fetched. See our Filtering guidelines for more details.
Tigger element skeleton state
Related components
- Filter results: Used to reflect the amount of results given a set of applied filters. It's also used to allow users to clear all filters.
- Listbox: A listbox provides a way to select or reorder options in a predefined list and a selected option can then be made to perform a single action.
- Popover: A small overlay that opens on demand. Popovers allow users to access additional content and actions without cluttering the page.