Component

Search Bar

A search input with debounced search, suggestions dropdown, and clear button. Uses the headless @refraction-ui/search-bar core.

Examples

Type to search with debounced suggestions.

Installation

$pnpm add @refraction-ui/react-search-bar

Usage

tsx

import { SearchBar, SearchResults, SearchResultItem } from '@refraction-ui/react-search-bar'

export function MyComponent() {
  const [results, setResults] = useState([])
  return (
    <SearchBar placeholder="Search..." onSearch={(q) => setResults(search(q))}>
      <SearchResults>
        {results.map((r) => <SearchResultItem key={r}>{r}</SearchResultItem>)}
      </SearchResults>
    </SearchBar>
  )
}

Props

Prop	Type	Default	Description
`value`	`string`	--	Controlled search value.
`onValueChange`	`(value: string) => void`	--	Callback when value changes.
`onSearch`	`(value: string) => void`	--	Callback with debounced search query.
`debounceMs`	`number`	`300`	Debounce delay in ms.
`loading`	`boolean`	`false`	Show loading spinner.
`placeholder`	`string`	--	Placeholder text.
`children`	`ReactNode`	--	SearchResults component.