Search List

Search List is a search field over one flat list. Typing filters the list, the arrow keys move through it, and choosing an item calls onSelect.

It is the Honest UI Command, arranged for this one case. Use Command directly when you need groups, shortcuts, or a dialog.

Installing search-list brings Command along as a registry dependency.

Filtering

Items are matched against their label, ignoring case. The description is shown but not searched.

Empty

When nothing matches, emptyMessage replaces the list. Say how to recover, such as clearing the search.

Search List takes its keyboard and screen reader behavior from Command: the field is a combobox, focus stays in it, and the highlighted item is exposed to assistive technology. Pass label to name the field. A placeholder is not a name.

import { SearchList } from "@/components/ai/search-list"

<SearchList
  label="Search saved prompts"
  placeholder="Search saved prompts…"
  items={prompts.map((prompt) => ({ id: prompt.id, label: prompt.title }))}
  onSelect={(item) => composer.insert(item.id)}
/>

With icons

Recent threads, with an icon on each item and an empty message that says how to recover.

SearchList