11.12.1

Filter

This kit can be implemented in a variety of ways.
To see examples of how to implement this kit in production visit the /dev_docs/search page in production.

Note
All React examples are wrapped in a {closePopover} method to ensure the popover closes on click of "Apply".

The min_width prop for the popover inside of filter is used in all the examples and is set to 360px. That is the min_width prop we recommend using as it is the same pixel value as our max_width sm global prop.

Default


No Background


To remove the background from a filter, add the prop background with a value of false.

Single


No Sort


To display results, use templates single or default.

Filter Only


Sort Only


Max Width for Popover Inside of Filter


Filter can leverage the max-width property. Learn more in our visual guidelines.

Filter Placement


Click the filter button above to toggle the popover.

To change the filter's popover position, use the placement prop with one of the positions:
"top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end"


UI Samples using Filter Kit

Get the full picture. See how this kit is used in our samples.