Filters

Filtering something — bar + multi-select + matching rows

The full loop: the multi-select dropdown is where chip values come from, the active chip echoes the applied filter, the rows below match it. Also the base vs --active chip contrast — an inactive chip ("Overdue only") is an available filter, an active one is applied and removable.

Saved views opt-in

Views are just links (server-rendered, zero new CSS) — but which one is "active" and what the filter bar's fields show shouldn't be hand-set per page. initSavedViews() derives both from the URL: it reads location.search, fills matching .bo-filter-bar fields, and marks whichever [data-saved-views] link's own querystring matches the current one aria-current="page" — clearing it from the others. Try it: click a saved view below, watch the filter bar and the active chip update to match.

Markup

<!-- A real <form>, so type="reset" works and role="search" sits on it. -->
<form class="bo-filter-bar" role="search" aria-label="Invoice filters">
  <input class="bo-input" type="search" name="q" aria-label="Search invoices" />
  <select class="bo-select" name="status" aria-label="Status">…</select>
  <span class="bo-chip bo-chip--active">Status: Pending
    <button class="bo-chip__remove" type="button"
            aria-label="Remove filter Status: Pending">✕</button>
  </span>
  <button class="bo-btn bo-btn--ghost" type="reset">Clear all</button>
</form>

Quick reference generated

State attributes: data-saved-views

API generated from CSS

• Make the bar a real <form role="search"> so type="reset" works.
• Chip remove buttons name their filter in aria-label; 24px hit area is built in.
• Saved views are just links — persistence (naming, saving, deleting a view) is your code; the behavior only keeps the UI in sync with whichever view the URL says is active.

Maturity generated

Introduced

v0.1.0

CSS floor

Chrome/Edge 99 · Firefox 97 · Safari 15.4

Alignment scored

2026-08-21

Assistive-tech evidence

None recorded

Pin this component's first release with npm i @busy-office/ui@0.1.0. The floor is derived from this component's stylesheet alone — set by @layer — so it sits at or below the whole framework's Chrome/Edge 119 · Firefox 129 · Safari 17.5. No assistive-technology runtime result is recorded for any component: it needs a human listening to VoiceOver and NVDA on owner hardware; no gate in this repo can simulate announcement behaviour. What automation covers instead is test:axe across every page at 1440 and 390, and check:forced-colors — see accessibility.

Design-system alignment generated

100% (18/18) — how closely this component follows the design language. Each rule is scored 0-3 against a checkable citation; rules that don't apply leave the denominator. Scored 2026-08-21.