Filter Chip - Everyday Interface Patterns

A static filter chip summary shows web buttons, Beginner, 12 matches, and Filter applied status.

Program

Filter chip summaries should show the query, selected filter, result count, and status after a filter is chosen, without running search.

filter_chip_summary.html

Visuals: captured from real browser rendering

<section class="filter-chip" aria-labelledby="filter-chip-title"><h2 id="filter-chip-title">Filter chip summary</h2><dl>
  <div><dt>Query</dt><dd>web buttons</dd></div>
  <div><dt>Filter</dt><dd><span class="chip">Beginner</span></dd></div>
  <div><dt>Results</dt><dd>12 matches</dd></div>
  <div><dt>Status</dt><dd><span class="badge">Filter applied</span></dd></div></dl>
  <p class="note">Static filter summary only; no live search, filter queries, search index, storage, route, API, network, script, form submit, analytics, or live result updates run.</p></section>
<style>
  .filter-chip { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #64748b; padding: 12px; }
  .filter-chip dl { display: grid; gap: 8px; margin: 0; }
  .filter-chip dl div { display: grid; grid-template-columns: 8rem 1fr; gap: 8px; }
  .filter-chip dt { color: #475569; }
  .filter-chip dd, .note { margin: 0; }
  .chip, .badge { border-radius: 999px; background: #dbeafe; padding: 2px 8px; }
  .note { color: #475569; }
</style>

Label the filter chip summary.
The section is labelled by its visible heading.
Show the query row.
The query is exact pinned data.
Show the filter chip.
The selected filter is exact pinned data.
Show result count.
The result count is exact pinned data.
Render the applied status.
The status badge says the filter is applied in this static display.
Check filter honesty.
Query, filter, results, status, and no live result updates.

step flow step(1) labels the source, step(2) shows the query, step(3) shows the filter, step(4) shows the result count, step(5) shows the applied status, and step(6) checks the honesty note.

filter readback The section heading names the filter chip summary surface.

filter rows Query, Filter, Results, and Status values are exact pinned data.

no live search The lesson should not imply live search, filter queries, search indexes, storage, routes, APIs, networks, scripts, form submits, analytics, or live result updates.