GlobalSearch

The search box of a top bar. The app filters on its side, often on a server, and passes grouped results; Enter with nothing highlighted submits the query for a full results page.

GlobalSearch
SearchResultGroup
SearchResultItem
Highlight

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, GlobalSearch

Try “board”, “sk-3” or “pri”.

Dark theme, GlobalSearch

Try “board”, “sk-3” or “pri”.

High contrast theme, GlobalSearch

Try “board”, “sk-3” or “pri”.

UsageLink to the section Usage

tsx

import { GlobalSearch, SearchResultGroup, SearchResultItem, Highlight } from '@skribly/ui/search'

tsx

<GlobalSearch label="Search" value={q} onChange={setQ} onSubmit={openResults}
  shortcutKey="/" shortcutHint="/" emptyLabel="No results" resultsLabel={`${count} results`}>
  <SearchResultGroup id="issues" title="Issues">
    <SearchResultItem id="SK-12" textValue="Draft lost" title="Draft lost" href="/issues/SK-12" />
  </SearchResultGroup>
</GlobalSearch>

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

AccessibilityLink to the section Accessibility

A combobox inside a search landmark with a hidden label. / focuses it from anywhere unless another field has focus, and aria-keyshortcuts tells screen readers.
Up and Down move through results while focus stays in the field; Enter opens the highlighted result; Escape closes the list and then clears it.
Groups are labelled by their titles.
Result counts, loading and errors are read from a polite live region, and an error shows an icon with its text.
The list keeps the field width and never runs off a narrow screen.

This demo runs through axe in all three themes on every test run. See what the tests check.