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.

Preview

Open Sandbox

Anatomy


import { Search } from '@wire-ui/react'
import type { SearchOption } from '@wire-ui/react'
 
const options: SearchOption[] = [
  { id: 'react', title: 'React' },
]
 
<Search.Root onSearchChange={setQuery} onSelect={(opt) => console.log(opt)} loading={isLoading}>
  <Search.Input placeholder="Search..." />
  <Search.Content>
    {options.map((opt) => (
      <Search.Item key={opt.id} option={opt}>
        {opt.title}
      </Search.Item>
    ))}
    <Search.Empty>No results found</Search.Empty>
  </Search.Content>
</Search.Root>

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