Filter bar

The viewer needs to narrow a large set by several attributes and see what's applied.

Updated September 10, 2026

Problem

There are nine hundred thousand events and the viewer cares about the production ones, from the checkout service, in the last hour, that failed. Four narrowings, and after applying them they need to be able to see at a glance which four they applied.

Solution

A persistent row of controls above the content, each narrowing the set, with every active filter visible as a removable chip. The state is the bar; the content is a consequence.

Two properties do nearly all the work, and both are about visibility rather than about filtering.

Applied filters must be legible without opening anything. A dropdown that says “Service” when three services are selected has hidden the thing that determines what is on screen. Chips showing service: checkout are longer and correct. This is Nielsen’s first heuristic applied to state rather than to progress: the person has to be able to see what the system is currently doing.

Removal must be as cheap as application. Filtering is exploratory, and exploration means overshooting. One click to add and three to remove produces viewers who stop narrowing.

Beyond that, the interesting design questions are about the filter values themselves. Should the bar show only values that exist in the current set, and update as filters are applied? Doing so prevents dead ends where a viewer selects a combination that matches nothing. Not doing so is much cheaper to build, and is why so many filter bars let you construct an empty result and then leave you wondering which choice caused it.

Grafana’s approach is worth studying because it is structurally different: variables are declared on the dashboard, populated by their own queries, and referenced inside panel queries, with the selection carried in the URL. That makes filtering explicit, shareable and chainable—one variable’s options can depend on another’s selection—at the cost of every filter being something an author had to build in advance.

Use when

The population is large, several attributes matter, and different viewers narrow differently. Any triage surface.

Don’t use when

There is one dimension and few values. Three tabs beat a filter bar with one dropdown. Also avoid a filter bar as the only way in: a page whose default state is unfiltered and unusable has pushed its information architecture onto the viewer.

Trade-offs

Filter bars accumulate. Every new attribute someone wants is one more control, and a twelve-control bar is a form. State becomes invisible in screenshots, so a filtered dashboard shared into a channel is routinely misread. Filters can conflict with each other in ways only discoverable by hitting an empty result. And a bar that persists filters across sessions will eventually greet someone with yesterday’s narrowing and no memory of having set it, which is the most confusing five minutes a dashboard can produce.

Checklist

Can a viewer see every applied filter without opening a control?
Is removing a filter as cheap as adding one, and is there a clear-all?
Do the offered values reflect the current set, or can a viewer construct an empty result?
If the result is empty, does the page say which filter caused it?
Does the filter state go into the URL?
Do filters persist across sessions, and does the viewer know?
Can filters be chained, so one narrows the options of the next?
How many controls before this stops being a bar and becomes a form?
Does everything on the page honour the filters, and do exceptions say so?
Does a screenshot of this page carry enough to be read correctly?

Compare

Grafana makes filters a declared object rather than an ad-hoc control: template variables are defined on the dashboard, populated by queries, chained so one constrains the next, and carried in the URL, which makes state shareable and every filter something someone had to anticipate. Honeycomb puts a query builder where the bar would be, so narrowing is composing a query and there is no fixed set of filterable attributes—the cost is a higher floor for a casual viewer. Sentry uses a single search field with a tag syntax, trading discoverability for speed once learned, and softens it with autocomplete over real tag values. Datadog scopes a whole page by tags from one control, so filters apply uniformly across every widget by construction rather than by each panel remembering to honour them.

Template variable is Grafana’s implementation of this and the entry that covers the chained-variable case. Cross-filter is the gestural alternative that narrows by selecting rather than by choosing. Search across panels covers free-text narrowing. Saved view is how a useful set of filters stops being retyped. Ranked list is what usually sits underneath and only means something once the population is narrowed.

Wireframe — the pattern's anatomy, not any one product's version of it

Implementation

Narrowing a large set by several attributes, with what is applied visible without opening anything. Applied filters belong as removable chips, and the result count belongs beside them so an empty result has an explanation.

shadcn: npx shadcn@latest add button popover command
npm: lucide-react
Tokens: --card--card-foreground--muted-foreground--border--chart-1

LightDarkCode

service: checkoutenv: prodsev: 1 and 24 of 9 alerts

p95 latency above 800 ms for 5 minsev 1 · 14:52
Card auth error rate 3.1% (threshold 2%)sev 2 · 14:47
Queue depth 4,200 and risingsev 2 · 14:41
Deploy 4a91c: canary failing health checksev 1 · 14:30

FilterBar.tsxA chip per applied filter, one click to remove, clear all, a count beside them, and a menu that offers only values the other filters leave.

import { useState, type ReactNode } from "react";
import { Plus } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";

/** One narrowing: a dimension and the values allowed through. */
export type Filter = { key: string; values: string[] };
export type Row = Record<string, string>;

/** "1 and 2", "checkout", "a, b and c". A chip says the values, never a count. */
const list = (v: string[]) => (v.length < 3 ? v.join(" and ") : `${v.slice(0, -1).join(", ")} and ${v[v.length - 1]}`);

const passes = (row: Row, filters: Filter[]) => filters.every((f) => f.values.includes(row[f.key]));

/**
 * The state is the bar; the content is a consequence. Every applied filter is
 * its own chip, removal is one click, and the offered values come from the
 * rows the other filters leave, so the viewer cannot build an empty result
 * from the menu. The count sits beside the chips, and an empty one says which
 * chip did it.
 */
export function FilterBar({ rows, keys, filters, onFiltersChange, noun = "rows", children }: {
  rows: Row[];
  /** The dimensions a viewer may filter on, in menu order. */
  keys: string[];
  filters: Filter[];
  onFiltersChange: (filters: Filter[]) => void;
  noun?: string;
  /** Renders the rows that pass. */
  children: (rows: Row[]) => ReactNode;
}) {
  const [open, setOpen] = useState(false);
  const matches = rows.filter((r) => passes(r, filters));

  // Which chip emptied the page: the one whose removal brings rows back.
  const culprit = matches.length === 0
    ? filters.find((f) => rows.some((r) => passes(r, filters.filter((g) => g !== f))))
    : undefined;

  const remove = (key: string) => onFiltersChange(filters.filter((f) => f.key !== key));
  const add = (key: string, value: string) => {
    const cur = filters.find((f) => f.key === key);
    onFiltersChange(cur
      ? filters.map((f) => (f.key === key ? { key, values: [...f.values, value] } : f))
      : [...filters, { key, values: [value] }]);
    setOpen(false);
  };
  // Options for a key come from rows that pass every other filter.
  const options = (key: string) => {
    const others = filters.filter((f) => f.key !== key);
    const chosen = filters.find((f) => f.key === key)?.values ?? [];
    return [...new Set(rows.filter((r) => passes(r, others)).map((r) => r[key]))].filter((v) => !chosen.includes(v)).sort();
  };

  return (
    <div className="rounded-lg border bg-card">
      <div className="flex flex-wrap items-center gap-2 border-b p-3">
        {filters.map((f) => (
          <span key={f.key} className="inline-flex items-center gap-1.5 rounded-md border border-chart-1 bg-chart-1/10 py-0.5 pl-2.5 pr-1 text-[11px] text-card-foreground">
            {f.key}: {list(f.values)}
            <Button variant="ghost" size="sm" className="h-5 w-5 p-0 text-chart-1" onClick={() => remove(f.key)} aria-label={`remove ${f.key} filter`}>✕</Button>
          </span>
        ))}
        {filters.length > 0 && (
          <Button variant="link" size="sm" className="h-auto p-0 text-[11px] text-muted-foreground underline underline-offset-2" onClick={() => onFiltersChange([])}>clear all</Button>
        )}
        <Popover open={open} onOpenChange={setOpen} modal={false}>
          <PopoverTrigger asChild>
            <Button variant="outline" size="sm" className="h-6 gap-1 px-2 text-[11px]"><Plus className="size-3" aria-hidden /> filter</Button>
          </PopoverTrigger>
          <PopoverContent align="start" className="w-56 p-0">
            <Command>
              <CommandInput placeholder="Narrow by…" className="h-8 text-xs" />
              <CommandList>
                <CommandEmpty>Nothing left to narrow by.</CommandEmpty>
                {keys.map((key) => (
                  <CommandGroup key={key} heading={key}>
                    {options(key).map((v) => (
                      <CommandItem key={v} value={`${key} ${v}`} onSelect={() => add(key, v)} className="text-xs">{v}</CommandItem>
                    ))}
                  </CommandGroup>
                ))}
              </CommandList>
            </Command>
          </PopoverContent>
        </Popover>
        <span className="ml-auto text-[11px] tabular-nums text-muted-foreground" aria-live="polite">
          {matches.length.toLocaleString("en-US")} of {rows.length.toLocaleString("en-US")} {noun}
        </span>
      </div>
      {culprit ? (
        <p className="p-3 text-xs text-muted-foreground">
          Nothing matches. Removing <span className="text-card-foreground">{culprit.key}: {list(culprit.values)}</span> would bring {noun} back.
        </p>
      ) : children(matches)}
    </div>
  );
}

demo.tsxHow it is called: the rows, the filterable keys, the applied filters in state, and a render function for what passes.

import { useState } from "react";
import { FilterBar, type Filter, type Row } from "./FilterBar";

/** Alerts from the last hour. Three filters applied, four rows left. */
const ALERTS: Row[] = [
  { at: "14:52", service: "checkout", env: "prod", sev: "1", title: "p95 latency above 800 ms for 5 min" },
  { at: "14:47", service: "checkout", env: "prod", sev: "2", title: "Card auth error rate 3.1% (threshold 2%)" },
  { at: "14:41", service: "checkout", env: "prod", sev: "2", title: "Queue depth 4,200 and rising" },
  { at: "14:30", service: "checkout", env: "prod", sev: "1", title: "Deploy 4a91c: canary failing health check" },
  { at: "14:28", service: "checkout", env: "prod", sev: "3", title: "Cache hit ratio below 90%" },
  { at: "14:22", service: "checkout", env: "staging", sev: "1", title: "Pod restarting in a loop" },
  { at: "14:15", service: "search", env: "prod", sev: "2", title: "Index lag 90 s" },
  { at: "14:09", service: "cart", env: "prod", sev: "1", title: "Redis primary failover" },
  { at: "13:58", service: "search", env: "staging", sev: "3", title: "Slow query logged 12 times" },
];

export default function Demo() {
  const [filters, setFilters] = useState<Filter[]>([
    { key: "service", values: ["checkout"] },
    { key: "env", values: ["prod"] },
    { key: "sev", values: ["1", "2"] },
  ]);
  return (
    <FilterBar rows={ALERTS} keys={["service", "env", "sev"]} filters={filters} onFiltersChange={setFilters} noun="alerts">
      {(rows) => (
        <ul className="flex flex-col divide-y">
          {rows.map((r) => (
            <li key={r.at + r.title} className="flex items-center gap-4 px-3 py-2 text-xs">
              <span className="text-card-foreground">{r.title}</span>
              <span className="ml-auto shrink-0 tabular-nums text-muted-foreground">sev {r.sev} · {r.at}</span>
            </li>
          ))}
        </ul>
      )}
    </FilterBar>
  );
}