THEME
MOTION
HAPTIC
SOUND
SEARCHBAR
Monospace search input. With `ai={{ semantic: true }}` routes query + items through provider.act("search", …) for AI ranking.
Live demo
Import
import { SearchBar } from '@cathode-ui/react';Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
items | SearchItem[] | — | yes | |
onSelect | (item: SearchItem) => void | — | yes | |
placeholder | string | SEARCH… | — | |
ai | SearchBarAIConfig | — | — | |
limit | number | 8 | — | |
icon | boolean | ReactNode | true | — | `true` → built-in "⌕" glyph (default). `false` → no icon. Pass a ReactNode to supply your own (e.g. Phosphor IconSearch). |
Examples
plain
<SearchBar items={items} onSelect={pick} />semantic
<SearchBar items={items} onSelect={pick} ai={{ semantic: true }} />Accessibility
Role: combobox
- aria-label on the input
Feedback
| Haptic | none |
| Sound | none |