SearchList

A compact command-search panel: a field, a live-filtered result list with a gliding highlight, and an empty state.

When to use

• Offer a short list of agent commands or saved prompts that people can filter by typing.
• Embed a search-and-pick list inside a popover, a side panel or an empty state.
• Not for a global, keyboard-driven launcher — use CommandPalette. Not for selecting a form value — use Combobox.

Usage

import SearchList from "@/components/iris/search-list/search-list";

h(SearchList, {
  items: ["Invoice-2026-09.pdf", "Lease notes.md", "lease-template.docx", "Deposit receipt.pdf"],
  labels: {
    placeholder: "Search files…",
    ariaLabel: "Search files",
    emptyTitle: "No results found",
    emptyHint: "Adjust your search to try again",
  },
});

Props

Prop	Type	Default	Description
items	string[]	7 notdocs documents and actions	The searchable entries. Each string is also its React key, so keep them unique.
labels	{ placeholder: string; ariaLabel: string; emptyTitle: string; emptyHint: string }	demo copy	Field and empty-state copy. This is a whole object, not a partial: pass all four keys.
variant	string	—	Accepted for gallery parity. It has no effect.

Notes

• With an empty query, only the first 5 items show. Filtering is a case-insensitive substring match.
• The empty state appears only once the query is longer than 2 characters and nothing matches.
• Clicking a result writes it into the field. There is no selection callback, so fork or wrap the component to act on a pick.
• The clear button (×) has an aria-label. Results are buttons inside a GlideMenu, so the highlight follows both hover and focus.
• The panel is at most 288px wide with a 248px minimum height. Reads --surface, --line, --hover, --inset, --ink and --ink-3.