Search Bar
Search field: clear button, an optional Cancel that slides in while focused, debounced input, loading state and a focus shortcut.
import { SearchBar } from "pleate/search-bar";Filter, shortcut, loading
Press / to focus the first one.
/
- Lisbon
- Kyoto
- Seville
- Naples
- Hanoi
- Reykjavík
- Marrakesh
- Porto
- Valencia
- Oaxaca
Ctrl K
Props
- value / defaultValue / onValueChange
Text.
string- debounce
ms before onValueChange while typing.
numberdefault 0- onSearch
Enter.
(value) => void- cancelable / loading
Cancel button while focused; spinner instead of clear.
boolean- shortcut
Global focus shortcut with a hint.
"/" | "mod+k"- size / variant
Look.
"sm" | "md" / "filled" | "surface"default "md" / "filled"
Accessibility
- A search landmark around a type=search input.
- Escape clears; Enter searches.