Filter chips
A horizontally-scrolling chip row that filters the list below — assignments by status, receipts by date, payments by method. The phone-first counterpart to the desktop data toolbar.
Canonical filter-chip row.
Per audit-reuse D-4, b-filter-chips is the canonical implementation of the filter-pill row. Legacy .filter-chips, .chip-bar and .hist-filter markup still renders via deprecation aliases in components.css; new code MUST use .b-filter-chips > .b-fc. For single-trigger pills (open-a-menu / removable tag), see Chip & tag.
Default
Chips with a count badge. The active chip inverts to brand fill.
Without counts
When the underlying set is too large to count cheaply, drop the badge.
Parts
| Property | Value | Notes |
|---|---|---|
| chip padding | 7 × 14 px | Tap target reaches ~32 px via line-height |
| radius | 9999 px | Pill shape — distinguishes from buttons |
| active fill | --brand · #fff | Inverts to brand to read at a glance |
| count badge | --surface-muted on rest, white-22% on active | Mono font, tabular-nums |
| overflow | scroll-x, scrollbar hidden | Touch-momentum on iOS |
| row padding | 12 × 16 px | Bleed to viewport edge so the first chip starts flush on phone |
Do & don't
Order chips by traffic — the chip most operators tap first goes first. "All" only leads when there's no obvious default.
Use chips for multi-select with > 2 selected. The visual stops reading. Use a check-list sheet instead.
Carry a count badge whenever the count is cheap and stable. The badge is half the value of the chip.
Animate the active chip into / out of view. The scroll snap is the feedback.
Accessibility
- Wrap with
role="tablist"if the chips swap content in place;role="radiogroup"if they're a single-select filter. - The active chip carries
aria-pressed="true"(radio) oraria-selected="true"(tab). - Count badges read as ambiguous numbers — append a hidden suffix:
<span class="sr-only"> results</span>. - The scrollable row gets
tabindex="0"and an accessible name so keyboard users can pan it.