9.19.0

Filter

Note
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.

Default

name

John Wick

city

San Francisco

Results:

1
sort by:


No Filter Selected

Results:

0
sort by:

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

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


Min Width for Popover Inside of Filter

name

John Wick

city

San Francisco

Results:

1
sort by:


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
  • id
  • data
  • aria
  • children
  • filters
  • sort_menu
  • results
  • template
  • background
  • min_width