Filter bar components

Powerful and customizable React filter bar components built for modern applications and websites. These filter bars are built using React Aria and styled with Tailwind CSS.

Filter bar example

Get the code

Installation

You can add this filter bar component using our CLI or manually:

npx untitledui@latest add filter-bar

Filter bar examples

Below are examples and variations of this filter bar component:

Simple

Get the code

Our filter bar component works seamlessly with tab navigation. This variant combines tabs for quick category switching with a search input for filtering within each category.

Tabs and date picker

Get the code

Date filters

The date filters variant provides multiple ways to select time ranges, including quick-select buttons for common periods, a dropdown for additional options, and a date range picker for custom selections.

Date filters

Get the code

Advanced filter inactive

The advanced filter variant provides a query builder-style interface with field, operator, and value inputs. This allows users to create complex filter combinations for data-heavy applications.

Advanced filter inactive

Get the code

Advanced filter active

This example shows the advanced filter with multiple active filter rows. Each row can be individually configured with a field, operator, and value, and removed with the close button.

Advanced filter active

Get the code

Filter dropdown menus

Filter slideout menus

API reference

Import the parts and assemble them:

import { FilterBar } from "@/components/application/filter-bar/filter-bar";
 
<FilterBar.Root>
    <FilterBar.Content>
        <FilterBar.FilterRow />
    </FilterBar.Content>
 
    <FilterBar.Actions>
        <FilterBar.FilterIconButton />
    </FilterBar.Actions>
</FilterBar.Root>

CountBadge

Import CountBadge from @/components/application/filter-bar/filter-dropdown-menu. Renders a <span> element.

CountBadge props
PropTypeDefaultDescription
count* (required)number—The number shown in the badge, used for the count of applied filters.
classNamestring—Additional class name for the badge.

FilterBar.Actions

Right actions area of the filter bar. Shrinks to fit content.

Renders a <div> element.

FilterBar.Actions props
PropTypeDefaultDescription
children* (required)ReactNode—Action buttons such as date picker, filters, search.

Also accepts all standard HTML attributes, all aria-* attributes, all standard React DOM event handlers.

FilterBar.Content

Left content area of the filter bar. Grows to fill available space.

Renders a <div> element.

FilterBar.Content props
PropTypeDefaultDescription
children* (required)ReactNode—Filter inputs, tabs, or other content.

Also accepts all standard HTML attributes, all aria-* attributes, all standard React DOM event handlers.

FilterBar.FilterIconButton

Icon-only button styled to match filter bar controls (secondary button appearance).

Renders React Aria’s Button — all of its props are supported.

FilterBar.FilterIconButton props
PropTypeDefaultDescription
icon* (required)FC<{ className?: string; }>—Icon component to render.
labelstring—Accessible label.
onPress(() => void)—Click handler.
classNamestring—Additional class names.

FilterBar.FilterRow

A single advanced filter row with inputs and a remove button.

Renders a <div> element.

FilterBar.FilterRow props
PropTypeDefaultDescription
children* (required)ReactNode—Filter field, operator, and value inputs.
onRemove(() => void)—Callback when the remove button is clicked.

Also accepts all standard HTML attributes, all aria-* attributes, all standard React DOM event handlers.

FilterBar.Root

Root layout container for the filter bar. Arranges content and actions horizontally with wrapping.

Renders a <div> element.

FilterBar.Root props
PropTypeDefaultDescription
children* (required)ReactNode—Content and actions for the filter bar.

Also accepts all standard HTML attributes, all aria-* attributes, all standard React DOM event handlers.

FilterDialog

Import FilterDialog from @/components/application/filter-bar/filter-dropdown-menu. Renders React Aria’s Dialog — all of its props are supported.

FilterDialog props
PropTypeDefaultDescription
filters* (required)FilterRow[]—The filter rows currently in the dialog.
renderFilterRow* (required)(filter: FilterRow, onChange: (patch: Partial<Omit<FilterRow, "id">>) => void) => ReactNode—Render function for a single filter row's inputs.
onApply((filters: FilterRow[]) => void)—Called when "Apply filter" is clicked.
onClearAll(() => void)—Called when "Clear all" is clicked.
onAddFilter(() => void)—Called when "Add filter" is clicked.
onRemoveFilter((id: string) => void)—Called when a filter row is removed.
onFilterChange((id: string, patch: Partial<Omit<FilterRow, "id">>) => void)—Called when a filter row changes.
classNamestring—Additional class name.

FilterDropdown

Import FilterDropdown from @/components/application/filter-bar/filter-dropdown-menu. Renders React Aria’s DialogTrigger — all of its props are supported.

FilterDropdown props
PropTypeDefaultDescription
filters* (required)FilterRow[]—The filter rows currently in the dialog.
renderFilterRow* (required)(filter: FilterRow, onChange: (patch: Partial<Omit<FilterRow, "id">>) => void) => ReactNode—Render function for a single filter row's inputs.
appliedCountnumber—Number of applied (committed) filters to show in the badge. Only used by the default trigger.
isDisabledboolean—Whether the trigger is disabled. Only used by the default trigger.
placement
"bottom""bottom start""bottom end"
"bottom end"Popover placement relative to trigger.
childrenReactNode—Custom trigger element. When provided, replaces the default "Filters" button.
onApply((filters: FilterRow[]) => void)—Called when "Apply filter" is clicked.
onClearAll(() => void)—Called when "Clear all" is clicked.
onAddFilter(() => void)—Called when "Add filter" is clicked.
onRemoveFilter((id: string) => void)—Called when a filter row is removed.
onFilterChange((id: string, patch: Partial<Omit<FilterRow, "id">>) => void)—Called when a filter row changes.
classNamestring—Additional class name.

FAQs

Please refer to our frequently asked questions page for more.

The folder has two files. filter-bar.tsx exports the FilterBar layout parts: FilterBar.Root, FilterBar.Content, FilterBar.Actions, FilterBar.FilterRow and FilterBar.FilterIconButton. filter-dropdown-menu.tsx exports FilterDropdown, FilterDialog and CountBadge for the advanced filter popover. The examples on this page build their layouts from Tabs, Input, Select, DateRangePicker and FilterDropdown.

FilterBar.Root is a wrapping flex row. Put tabs, search and selects in FilterBar.Content, which grows to fill the space and wraps its children, and put buttons in FilterBar.Actions, which stays at its content width. FilterBar.FilterRow wraps one row of filter inputs with a remove button that calls onRemove. These parts only handle layout and hold no filter state.

Use FilterDropdown. Keep an array of { id, field, operator, value } rows in your own state, pass it as filters, and render each row's inputs with renderFilterRow(filter, onChange), calling onChange with the changed fields. Wire up onAddFilter, onRemoveFilter, onFilterChange and onClearAll; Apply filter calls onApply with the current rows and closes the popover.

Pass appliedCount to FilterDropdown and the default Filters button shows it in a badge. To use your own trigger, pass it as children; appliedCount and isDisabled then have no effect. The popover opens at "bottom end" by default, and placement also accepts "bottom" and "bottom start".

Use FilterBar.FilterIconButton with an icon component and always pass label. The button has no visible text, so label is its only accessible name. Handle clicks with onPress.

The examples use Input with icon={SearchLg}, size="sm", aria-label="Search" and placeholder="Search". The shortcut prop on Input only displays a ⌘K hint (hidden below md) and doesn't register a keyboard shortcut, so add your own handler if you need one.

The examples hide or swap controls with Tailwind breakpoint classes: the DateRangePicker gets max-md:hidden, an icon-only Filters button replaces the labeled one below md, and the period buttons switch to short labels such as 7d. Use the same approach for your own controls.

File uploadersGradient pickers