Search

Search input with a dropdown results list. Keyboard navigation with Arrow keys, Enter to select, Escape to close. Supports loading state and empty state.

Features

Keyboard navigation with Arrow keys, Enter, and Escape.

Loading state support via data-loading.

Empty state rendering.

Debounced search with configurable delay.

Example

Anatomy


import { Search } from '@wire-ui/react'
 
<Search.Root
value={query}
onSearchChange={setQuery}
onSelect={(option) => alert('Selected: ' + option.title)}>
<Search.Input placeholder="Search frameworks..." />
<Search.Content>
{filtered.map((item) => (
  <Search.Item key={item.id} option={item}>
    {item.title}
  </Search.Item>
))}
</Search.Content>
</Search.Root>

Styling

Search exposes data-loading on Root and data-highlighted on items for keyboard navigation state.


<Search.Root className="
  data-[loading]:opacity-50
">
  <Search.Input className="border border-black" />
  <Search.Item className="
    data-[highlighted]:bg-gray-100
  " />
</Search.Root>

Using data attributes

Root sets data-loading when the loading prop is true. Items set data-highlighted when focused via keyboard.


/* Loading state */
[data-loading] { opacity: 0.6; }
 
/* Keyboard-highlighted item */
[data-highlighted] { background: #f5f5f5; }

Root props

Prop	Type	Default	Description
`onSearchChange`	`(query: string) => void`	—	Called on every keystroke
`onSelect`	`(option: SearchOption) => void`	—	Called when an item is selected
`loading`	`boolean`	`false`	Adds `data-loading` to root
`searchDelay`	`number`	`0`	Debounce delay for `onSearchChange` in ms

SearchOption type


type SearchOption = {
  id: string | number
  title: string
  subtitle?: string
}

Item data attributes

Attribute	When present
`data-highlighted`	Item is keyboard-focused / active

Root data attributes

Attribute	When present
`data-loading`	`loading` prop is true

Key	Action
`ArrowDown`	Move highlight down
`ArrowUp`	Move highlight up
`Enter`	Select highlighted item
`Escape`	Close dropdown, clear highlight

Keyboard Interactions

Key	Description
`ArrowDown`	Moves highlight to the next result item.
`ArrowUp`	Moves highlight to the previous result item.
`Enter`	Selects the highlighted item.
`Escape`	Closes the dropdown and clears the highlight.