Query Language Bar
Power-search bar with a structured query input, token-highlighted echo of parsed filters, a syntax reference panel, and a live result count.
Power-search bar with a structured query input, token-highlighted echo of parsed filters, a syntax reference panel, and a live result count.
The Application Collection unlocks the source for every Application block. All Access unlocks every Collection.
Already purchased? Log in
Query Language Bar is the power-search surface for Issues,
showing a mono input pre-filled with
status:open assignee:me priority:high and a parsed-token
echo beneath it where each filter splits into a dim key and
a bold value. A help-circle button opens a syntax reference
panel listing six operators from created:>2026-06-01 down
to label:bug, with the tip that all conditions are ANDed.
The result count reads 14 issues match.
Tokens and help entries are two flat const arrays. The token echo is why the bar earns the power-search label: users see their query parsed back at them before they hit enter, which catches typos silently.
Reach for this block on any list page where users need more precision than facet chips can give. Wire the input value to your query parser and replace the static count with a live results total.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the issues power-search bar. Other query bar surfaces:
plan:pro country:us mrr:>500 as
the starting expression.level:error service:api-gateway with
a time-range operator.actor:avery@acme.com action:delete
against an event log.Tip: the token echo doubles as inline validation; show an unknown-key badge there before the user submits.