Data and analytics · §10.3
Filter bar
Search and filters above admin lists.
Code
<FilterBar filters={filters} onClear={clear} search={search} t={t} />Accessibility
- A search landmark; every filter labelled; the active count is announced.
Usage
Do
- Full-width selects that wrap on narrow screens.
Don't
- Don't hide filters behind an icon on desktop.
Platforms
- Web
- apps/web/components/edflow/filter-bar.tsx
- iOS
- SwiftUI .searchable + Menu
- Android
- Compose FilterChips