Search Bar
A destination search input with magnifying glass icon, placeholder text, auto-suggest dropdown, and clear button.
Preview
Usage
tsx
import { SearchBar } from "zostel-ui";
<SearchBar
placeholder="Search destinations..."
suggestions={["Manali", "Goa", "Rishikesh", "Jaipur"]}
onSearch={(query) => console.log(query)}
variant="default"
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
placeholder | string | "Search destinations..." | Input placeholder text |
suggestions | string[] | — | Array of suggestion strings for the dropdown |
onSearch | (query: string) => void | — | Callback when a search is submitted |
variant | "default" | "compact" | "button" | "default" | Visual layout variant |
value | string | — | Controlled input value |
onChange | (value: string) => void | — | Callback when input value changes |
placeholderType:
stringDefault: "Search destinations..."
Input placeholder text
suggestionsType:
string[]Default: —
Array of suggestion strings for the dropdown
onSearchType:
(query: string) => voidDefault: —
Callback when a search is submitted
variantType:
"default" | "compact" | "button"Default: "default"
Visual layout variant
valueType:
stringDefault: —
Controlled input value
onChangeType:
(value: string) => voidDefault: —
Callback when input value changes