Components › Forms & input › Filter › Filter bar

Filter bar

canon

Row of filter chips with add, reset and save controls.

React implementation lives in the app (apps/web/src/components/FilterBar.tsx), not in @acrm/ui. Phone (owner 2026-09-28, acrm !4088): with onOpenChange the bar is the bottom sheet „Filtry" (search, conditions with ⋮ Odebrat, Přidat filtr, Vymazat vše, Hotovo); the Filtr toggle shows a neutral CountBadge, Řadit (SegmentScreen) a sort sheet; „Uložit pro všechny" moves to the bar's ⋮ (phoneOnly). „Vymazat filtry" = Button ghost tone muted. Desktop unchanged. 14 Oct 2026 (owner "24c approved", proto/lista-vypisu@a16fe17a7, acrm !5045): no word labels — Filtr = icon (+ dot), Seskupit/Řadit/Zobrazení = icon + chosen value, field name only in aria-label/tooltip; open row: chip = field icon + value, „+" and „×" icons; closed by default, „Jen moje" is a chip inside Filtr. Dev check 14 Oct on /tasks /pipeline /objednavky /setkani /lide, 1440 + 390: 0 label words, no overflow. Registry repaired 17 Oct 2026 (review F2): removed classes with no CSS definition and no TSX use on main: .fb-add, .fb-reset, .fb-save.

Used in 23 files · 21 areas · 48× — components/communication, components/datamart, pages/AccountingInvoicesPage, pages/AccountingReceivedInvoicesPage, pages/AsistentAuditPage, pages/DokumentyPage …

Import

Not exported from @acrm/ui — <FilterBar&gt;, &lt;FilterToggleChip> lives in the app (apps/web/src/components/FilterBar.tsx). Reuse the CSS classes below, or move the component into the package first.

Props

FilterBar

No props extracted (not in props.json).

FilterToggleChip

No props extracted (not in props.json).

CSS classes

.fb-clear.fb-conj.fb-menu.fb-sheet.fb-sheet-body.fb-sheet-row.fb-count

Files