shadcn.io is not affiliated with official shadcn/ui
Filter Builder Command Menu Block for Ark UI
A reporting tool's command menu that builds a rule as a sentence in three steps, field then operator then value, shows the sentence so far, commits rules to a strip, and filters the drawn deals report behind it.
Installation
Overview
Build a filter as a sentence with this filter builder command menu for React with Ark UI. It opens from the Reports page in Predicate Lane, a reporting tool, whose header holds an outline field with its ⌘ K cap, and a deals report is drawn under a soft scrim inside a hairline frame with a plus mark on each corner. The menu is the catalog Command walking one rule through three steps: a field (Status, Region, Segment or Amount), an operator (is, is not, is above, is below) and a value, a choice from the field's list or an amount from presets or typed. The placeholder names the step, a bar above shows the sentence so far ("Status is not …"), and Enter on the value commits the rule to the strip of rules under it, where each rule is a removable chip. Two saved filters are rows on the first step and replace the rules. The drawn report behind the menu keeps only the deals that pass every rule, and the status line says how many. For preview the menu is drawn open in place when the page loads; the field, or Ctrl or ⌘ K while focus is in the block, opens the real command dialog with the same rules, step and query. For reports, saved views and any screen where a rule is clearer as a sentence than as a form.
FAQ
Why is the menu already open, and what do I keep?
So you can see it without a click. On load the menu is the Command drawn inline over a picture of a deals report, in a plain shell that is not modal, so nothing is trapped, hidden or focused and the page around the preview keeps working. The header's field opens the real command dialog, modal, with its focus trap, Escape and focus return, and the inline copy stays closed until a reload. Both show the same Palette and share the block's state, so the rules or the step in the copy is in the dialog. In your app keep the dialog and drop the copy: the "in-place" state, the scrim with its shell and the Escape and blur effects.
How do the three steps work?
rowsFor(step, query, field, op) is a plain function that returns the rows for the step you are on, and the list is keyed by the step so the highlight and scroll start over. Choosing a field moves to its operators, choosing an operator moves to its values, and choosing a value finishes the rule, adds it to the strip and returns to the first step with the field emptied and focused. Each value row says how many deals the rule so far would keep.
How do I go back?
Three ways: the Back button in the sentence bar, Backspace on an empty field, and Escape, which steps back before it closes anything. Closing the real dialog by a click away goes back a step too while a rule is half built, and the half-built rule is dropped when the in-place copy closes. Each move is spoken on the status line, for example "Back to the operator."
How does the Amount field take a number?
Its values are four presets, each with how many deals it keeps. Type digits (commas allowed) and a first row "Use" with that amount comes first, so Enter commits it; moneyOf formats it with thousands separators by hand, not with Intl, so server and browser print the same text. Operators on a number are only is above and is below.
What stays local, and how do I wire it?
All of it. The ten deals, the four fields and the two saved filters are typed constants, and the report is a drawing. In your app turn rules into a query (or send them as JSON), load the saved filters from your account, and replace keptBy with the result count from your API. Use the field's kind to decide which operators and which value control each column gets.
Is it accessible from the keyboard?
Yes. Type to search, the arrow keys move through the rows, Enter chooses on each step, Backspace on the empty field goes back, and Tab reaches the Back button, each rule's remove button and Clear. Escape closes the menu with focus on the field, and Ctrl or ⌘ K opens the dialog while focus is inside the block, and only then. The rows are options of a combobox and the first is highlighted when it opens.