React Dropdown Filters - Flowbite

Get started with a collection of dropdown filter components to allow users to query through search results by filtering categories, date ranges, keywords, and more.


Default dropdown filter

Use this free example of a filter component to allow your users to select which categories to filter in the search results using checkbox components.

View on GitHub

Advanced filter by keywords

Use this advanced example to allow users to filter search results via keywords, categories, price, shipping method, and rating inside a dropdown component with an accordion.

View on GitHub

Filter by category

Use this example to show multiple options to filter using checkbox and radio elements split up by category labels.

View on GitHub

Dropdown filter with tabs options

Use this example to break up your filter options into multiple tabs such as price, shipping method, and categories.

View on GitHub

Filter by properties

This advanced example can be used to add multiple properties and options to the current filtering feature inside a dropdown component.

View on GitHub

Filter by status

This example can be used to filter search results by status using checkbox elements and indicators inside the dropdown component.

View on GitHub

Advanced filter options

Use this example to show multiple filter option filters inside a dropdown include price range sliders, text input fields, checkboxes and radio input elements.

View on GitHub

Filter by range

Use this example to filter search results based on a price range using buttons and input field elements inside a dropdown.

View on GitHub