GlobalSearch
A search field over a grouped list of pages, records and actions. Typing filters the list; arrow keys and Enter pick.
Master
Type to filter. Arrow keys move the highlight and Enter picks. Escape clears. Toggle the key hints.
Usage
Use GlobalSearch for quick jumps and actions across the app, like a global search. It is one component: pass groups of items as data. Typing filters by label and description, and the typed text shows bold in each label. Arrow keys move the highlight and Enter picks; Escape clears the search. It shows inline; a ⌘K palette comes later. variant tabs turns the group headings into tabs (All, Records, Reports...), like the global search. scopes adds a menu in the search row to narrow what it looks through. onViewAll adds a View all results row at the end. AppHeader and Toolbar open it over their search field, so the field grows into the results. See contracts/globalsearch.json for the full contract.
Do's
- A global search across pages, records and reports.
- A quick list of actions people find by typing.
Don'ts
- Do not invent CommandInput, CommandList, CommandItem, CommandGroup, CommandEmpty, CommandDialog or SearchPanel.
- Do not use for a short list of actions from a button. Use Dropdown.
- Do not use for choosing a form value. Use RadioGroup, or Select when it exists.
- Do not wrap it in a local overlay or build a ⌘K palette yet.
- Do not use raw hex.
<GlobalSearch
groups={[
{ heading: "Records", items: [{ id: "invoices", label: "Invoices", description: "Billing › Invoices", icon: "receipt_long" }, { id: "customers", label: "Customers", description: "Accounts › Customers", icon: "group" }, { id: "subscriptions", label: "Subscriptions", description: "Billing › Subscriptions", icon: "autorenew" }] },
{ heading: "Reports", items: [{ id: "revenue", label: "Revenue by month", icon: "bar_chart" }, { id: "aging", label: "Accounts receivable aging", icon: "bar_chart" }] },
{ heading: "Actions", items: [{ id: "new-invoice", label: "Create invoice", icon: "add", shortcut: "N" }, { id: "export", label: "Export all data", icon: "download", disabled: true }] },
]}
variant="list"
iconStyle="tile"
size="md"
/>