Search that answers

The problem

Search that only runs on Enter, highlights nothing and ends in a blank list makes people doubt the data. Typos and wrong scope look the same as “it doesn't exist”.

When to use it

Use it for

Lists with more than about 20 items.
App-wide jumping between pages, people and records: use CommandPalette on ⌘K.

Not for

Small lists: show them all.
Structured narrowing by fields like status or date: use filters.

Anatomy

Search fieldA visible label or aria-label, a clear button and an optional shortcut hint.
Result count“3 people match ‘sa’”, in a polite live region.
ResultsOrdered by relevance, with the matched text visible.
No resultsAn EmptyState that repeats the query and suggests what to try.

How to build it

Filter local lists as people type; debounce remote search by 200 to 300 ms.
Match each word anywhere, ignoring case and accents.
Announce the count politely after the results update.
Keep the query in the URL so the back button and shared links work.
On no results, repeat the query and offer a way out: clear it, or search everywhere.

app.tsx

import { Button, EmptyState, SearchField } from "@nexera-ui/react";

const results = people.filter((p) => matches(p.name, query));

<SearchField label="Search people" value={query} onChange={setQuery} />
<p aria-live="polite">{results.length} people match</p>
{results.length ? (
  <PeopleList people={results} />
) : (
  <EmptyState
    title={`No one matches “${query}”`}
    description="Check the spelling, or search by team or email."
    secondaryAction={<Button variant="secondary" onPress={() => setQuery("")}>Clear search</Button>}
  />
)}

Accessibility

Keyboard support
Key	Action
`Escape`	Clears the field.
`Enter`	Submits the search (onSubmit).
`⌘K / Ctrl K`	Opens the CommandPalette, when you add one.

SearchField has role=searchbox and a clear button with an accessible name.
The result count is announced politely, not on every keystroke.
Results are a list, so screen readers say how many there are.

Do and don't

DoFilter as people type and show the count.

Don'tWait for Enter, then reload the page.

DoRepeat the query when nothing matches and suggest what to try.

Don'tShow an empty table.

DoMatch words in any order: “khan sara” finds Sara Khan.

Don'tRequire an exact, case-sensitive match.