#Filter Bar

Filter Bar keeps search, facets, active conditions, result count, and clear actions in one stable region. It maintains control state and emits events while the host application owns result queries.

npm install @a3s-lab/ui

<form class="filter-bar" role="search" aria-label="Filter projects">
  <div data-filter-controls>
    <div data-filter-primary>
      <input
        class="input"
        type="search"
        data-filter-search
        aria-label="Search projects"
      />
      <div data-filter-group data-selection="single">
        <button
          type="button"
          data-filter-toggle
          data-filter-name="state"
          data-filter-value="active"
          aria-pressed="true"
        >
          Active
        </button>
      </div>
    </div>
    <div data-filter-actions>
      <output data-filter-count>12 projects</output
      ><button type="button" data-filter-clear>Clear</button>
    </div>
  </div>
</form>

import "@a3s-lab/ui/a3s.css";
import "@a3s-lab/ui/all";

#Usage

<form class="filter-bar" role="search" aria-label="Filter projects">
  <div data-filter-controls>
    <div data-filter-primary>
      <input
        class="input"
        type="search"
        data-filter-search
        aria-label="Search projects"
      />
      <div data-filter-group data-selection="single">
        <button
          type="button"
          data-filter-toggle
          data-filter-name="state"
          data-filter-value="active"
          aria-pressed="true"
        >
          Active
        </button>
      </div>
    </div>
    <div data-filter-actions>
      <output data-filter-count>12 projects</output
      ><button type="button" data-filter-clear>Clear</button>
    </div>
  </div>
</form>

After loading filter-bar.js, the controller synchronizes single- or multi-select buttons, active chips, and clear actions.

#Parameters

#JavaScript API

const filters = document.querySelector(".filter-bar");
filters.setFilters([{ name: "state", value: "active" }]);
filters.setSearch({ query: "release" });
console.log(filters.getState());
filters.resetFilters();
filters.addEventListener("a3s:filter-change", ({ detail }) =>
  updateQuery(detail),
);

getFilters() and getSearch() return query snapshots. setFilters(), setSearch(), clear(), and resetFilters() keep segmented controls, active chips, and search values synchronized. Native form.reset() uses the same initial snapshot, while requestSubmit() keeps normal form submission semantics. refresh({ preserve, resetInitial }) rebinds replaced controls.

a3s:filter-before-change is cancelable and restores the previous query when rejected. a3s:filter-change contains previous, current, source, kind, and the compatibility filters fields. Programmatic search updates emit one native input event and one custom change event; user typing reuses its existing native event rather than duplicating it.

#States and variants

Show two to four frequent segmented conditions directly. Put larger facet sets in Select, Combobox, or Dropdown Menu. Do not turn every field into a chip or add a complex toolbar for one condition.

Keep input and active conditions visible while remote results load. No results belongs to the results region's Empty state rather than replacing the Filter Bar.

#Accessibility

Use a named search form. Toggle buttons maintain aria-pressed, and result-count changes use polite announcements. Keep focus near a removed condition, and do not move focus into the results after clearing all filters.