Content
cellsThe count badge
1 applied
3 applied
12 applied
Filters
Narrow a list without leaving it: FilterBar’s five layout parts plus the menu’s dropdown, dialog, and count badge. Row inputs and all state are yours.
Filters
Narrow a list without leaving it: FilterBar’s five layout parts plus the menu’s dropdown, dialog, and count badge. Row inputs and all state are yours.
Demo
heroRows in the menu
appliedCount
surface
placement
import { Calendar, SearchLg } from "@untitledui/icons";
import { Button } from "@/components/base/buttons/button";
import { FilterBar } from "@/components/application/filter-bar/filter-bar";
import { FilterDropdown } from "@/components/application/filter-bar/filter-dropdown-menu";
<FilterBar.Root>
<FilterBar.Content>
<Button size="sm" color="secondary" iconLeading={Calendar}>
Last 30 days
</Button>
</FilterBar.Content>
<FilterBar.Actions>
<FilterBar.FilterIconButton icon={SearchLg} label="Search orders" />
<FilterDropdown
filters={filters}
appliedCount={3}
onApply={(next) => setApplied(next.length)}
onAddFilter={addRow}
onRemoveFilter={removeRow}
onFilterChange={patchRow}
onClearAll={clearAll}
renderFilterRow={(filter, onChange) => (
<FieldOperatorValueInputs filter={filter} onChange={onChange} />
)}
/>
</FilterBar.Actions>
</FilterBar.Root>
In context
in-contextFamily
familyFilterBar.FilterIconButton
FilterDropdown
No filters applied
Add filters to narrow down results.
3 applied
Types
cellsAll eight bars the sheet draws, in canvas order.
The bar
Status
Category
Sort by
Value
The trigger
the default, nothing applied
appliedCount 2: the tint and the badge
children: a More filters trigger
children: the icon-only trigger
The icon button
icon SearchLg, label Search orders
icon Calendar, label Pick a date range
Layouts
cellsThe menu
No filters applied
Add filters to narrow down results.
Value
The slideout
surface slideout, three rows
surface slideout, empty: the footer stays
The row
Value
Value
count 1
count 3
count 12: the box grows with the digits
Behaviour
cellsbelow md: the trigger opens the slideout
below md, Advanced: one Edit filters trigger
States
cellsisDisabled on the trigger
isDisabled on the icon button