Filter bar

2026

search
observability

Vercel runtime logs, rows that match the filters
Status	Method	Path	Region	Duration
500	PUT	/api/auth/session	iad1	1043 ms
500	GET	/blog/hello-world	fra1	1240 ms
500	PUT	/blog/hello-world	gru1	1269 ms
404	POST	/pricing	iad1	378 ms
404	PUT	/docs/getting-started	fra1	377 ms
404	POST	/pricing	fra1	306 ms

6 of 36 rows

Type status: and the bar offers the values that field can take. Tab or Enter turns the text into a token. status:!200 means not 200, amount:>5000 means more than 5000, and a bare word searches every field. The control under the stage switches between three datasets, Vercel runtime logs, Profound prompts and Ramp transactions, to show that the bar only needs a list of fields. Each one keeps its own query, so switching back finds it where you left it.

The query lives in the address bar, one parameter per dataset, as ?logs=status:!200+duration:>300 once it is encoded. The page reads it, and every edit pushes a new history entry, so Back and Forward walk through the edits and a reload brings the same table back. Nothing is mirrored into state and synced afterwards. On the home grid the same bar keeps its filters in memory instead, because it should not rewrite the address of the page it sits on. A missing parameter means the dataset's example query, and an empty one means no filters. The page itself is static, so the server renders the example query and a shared link swaps in its own once the page hydrates, in place and without animating.

A token is data, not a string. The text is parsed into a field, an operator and a value, filtered, and serialized back when you edit it. Parsing and serializing round trip, so a quoted value like path:"/a b" survives a reload. The checks, the matching and the suggestions are plain functions with a small script that asserts their output.

Each value in the suggestions says how many rows it would leave with the filters you already have, and a value that would leave none is dimmed, so you can see a dead end before you take it. If you take one anyway, the table does not just say nothing matches. It lists each filter with the rows that come back without it, most first, plus Clear all. Text filters and bare words mark what they matched in the table, so it is clear why a row is there.

A wrong token never blocks typing. status:abc stays in the bar with a pink outline and a short reason, is skipped when filtering, and is counted under the table as ignored.

Editing is where a token bar usually falls apart. Backspace at the start of the field moves to the last token, and Backspace again turns it back into text with the caret at the end, so a typo costs one key and not a retype. The arrows walk between tokens, and only the field is in the Tab order, so the bar is one stop however many filters it holds.

Nothing moves when the suggestions open. They sit over the results instead of pushing them down. When tokens wrap to a second line the table gets shorter, and a token that leaves shrinks away instead of snapping the field into its place.

Keyboard and access

Keyboard: Tab reaches the filter field, which is a combobox. Typing opens suggestions, the up and down arrows move through them, and Tab or Enter accepts the highlighted one. Accepting a field name keeps the list open for its values. Enter with nothing highlighted, or a space after a value, turns the text into a token. Escape closes the list and a second Escape clears the text. Left arrow or Backspace at the start of the field moves to the last token. On a token, Left, Right, Home and End move between tokens, Right past the last one returns to the field, Backspace or Enter turns it back into text to edit, Delete removes it and Escape returns to the field. When no row matches, the table offers a button per filter to remove it and a Clear all button, and either one returns focus to the field. The dataset tabs are ordinary tabs, and the results area scrolls with the keyboard.
Screen readers: The field is a combobox that names its listbox and the highlighted option as it moves, and each value option also reads how many rows it would leave. The filters are a list named Filters, and each token reads as a sentence such as "status is not 200", with "invalid" and the reason added when it does not fit. A polite live region reports the number of matching rows after the filters change, including how many filters were ignored. The results are a real table with a caption.
Reduced motion: With reduced motion tokens and the suggestion list appear and leave without a transition.