Components › Forms & input › Filter › Filter chip

Filter chip

canon

One filter field written out: icon, field name and value; the chip opens the field menu.

Rendered by FilterBar.tsx (ChipMenu); the menu frame is the canonical Popover. 14 Oct 2026 (acrm !5045): chip = field icon + value, field name in aria-label/title (RULES §24.3).

Used in 7 files · 7 areas · 18× — components/FilterBar, components/communication, components/segment, pages/PostaPage, pages/SetkaniPage, pages/TasksPage …

.fb-chip .fb-opt .fb-groupSourceStoryLegacy card filter-bar.html
ExamplesCodeUsageAccessibilityChangelog

One field of the filter, written out: icon · field name · value · chevron. Clicking it opens the field's menu — a single layer inside the canonical popover, 264px wide (.fb-menu). The frame (border, shadow, padding, scroll cap) belongs to .acrm-popover; the filter only fills it. React: apps/web/src/components/FilterBar.tsx (ChipMenu), CSS apps/web/src/ds/filter-bar.css.

When to use

  • Every field of a Filter bar: closed lists (stage, status), several values (tags, colleagues), free text, dates, booleans.
  • Where the value must be readable without opening anything — the chip states it.

When not to use

  • As a standalone control outside the bar. A chip that opens a menu somewhere else is a Nav select (bar) or a Picker menu (actions).
  • As a tag or a label. A value the user can take back is a Removable chip; a small set of togglable options is Option chips.
  • For a value that is not a filter (a status, a phase) — that is a tile or a row, not a chip.

Anatomy

  • Chip .fb-chip — 30px, --surface-100, 1px solid var(--border-strong), radius-md, gap: 7px: field icon (.ti, 14px, --fg-secondary), field name (.k, --fg-muted), value (.v, 600, --ink-900, clipped at 148px), chevron (.chev, --fg-muted).
  • Open state .open = --active-surface; hover = --surface-75.
  • Menu .fb-menu — 264px, one layer, no heading (the chip that opened it says which field this is) and no sub-menus.
  • Search row = the canonical .acrm-recordselect-search (Record select), not a copy of its own — when it is the first row of the menu, the header stays put and the list scrolls under it.
  • Option .fb-opt — 32px row, 500 13/20, radius-sm, hover --hover-surface; optional leading icon .lead, then the label, then either the check .chk (one value; .chk.off keeps the space) or the checkbox .ck on the right (several values).
  • Empty / loading .fb-empty — one muted line, 400 12px, padding var(--sp-4) var(--sp-3).
  • Footer .fb-foot — appears only when the field has a value: hairline .fb-sep and the row Vymazat filtr (.fb-clear), stuck to the bottom edge so it is reachable in a long list without scrolling.

Best practices

Do
  • One value: pick and the menu closes. Several values: the checkbox sits on the right and the menu stays open (dropdown ruling D6, 22 Aug 2026).
  • Show the search row as the first row when the list can exceed roughly eight items.
  • Offer Vymazat filtr in the footer only when there is something to clear; clearing removes the chip from the bar.
  • Join several values in the chip with a comma and let the 148px clip do the rest — the menu holds the full truth.
Don’t
  • A heading inside the menu (eyebrow, "Fáze") — a menu never has a title over its rows.
  • A sub-menu or a second layer; every action of the field fits in this one panel.
  • A ⋯ menu on a chip. The only actions are "set a value" and "clear the filter", and both are rows in the menu.
  • A checkbox on the left. In this system every multi-select menu puts it on the right.

Content

  • Field name in sentence case, the value as the user would say it: Fáze Jednání, Štítky Investoři, Praha.
  • Empty state: Nic nenalezeno. Loading: Načítám štítky… — the same row, another sentence, no spinner.
  • Footer row: Vymazat filtr (this field), never Vymazat filtry (that is the whole bar).
  • filter-bar — the row this chip lives in.
  • record-select — owns the search row this menu reuses.
  • popover — the frame around the menu.
  • check-menu, multi-select — deprecated menus whose job this chip does inside the bar.
  • Stories: components--filter-chip--default, --variants, --states, --with-icon-kbd, --composition.

Source: docs/filter/filter-chip.usage.md · GitLab