11.13.0

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

name

John Wick

city

San Francisco

Results:

1
sort by:

No Filter Selected

Results:

0
sort by:

No Background

name

John Wick

city

Las Vegas

3 Results
name

John Wick

city

Las Vegas

Results:

3
sort by:

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

Single

name

John Wick

546 Results

No Sort

name

John Wick

546 Results

To display results, use templates single or default.

Filter Only

name

John Wick


Max Width for Popover Inside of Filter

name

John Wick

city

San Francisco

Results:

1
sort by:

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

Filter Placement

name

John Wick


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.

Available Props

  • classname
  • dark
  • margin
  • margin_bottom
  • margin_left
  • margin_right
  • margin_top
  • margin_x
  • margin_y
  • max_width
  • padding
  • padding_bottom
  • padding_left
  • padding_right
  • padding_top
  • padding_x
  • padding_y
  • z_index
  • number_spacing
  • shadow
  • line_height
  • display
  • cursor
  • flex_direction
  • flex_wrap
  • justify_content
  • justify_self
  • align_items
  • align_content
  • align_self
  • flex
  • flex_grow
  • flex_shrink
  • order
  • id
  • data
  • aria
  • children
  • filters
  • sort_menu
  • results
  • template
  • background
  • min_width
  • placement