Trips & places Search Bar

Search Bar

Where next? Type a place — suggestions come grouped.

Preview

Where next?

Usage

tsx

import { SearchBar } from "zostel-ui";

<SearchBar
  placeholder="Where next?"
  suggestions={[
    { value: "manali", label: "Manali", category: "Himachal Pradesh" },
    { value: "pokhara", label: "Pokhara", category: "Nepal" },
  ]}
  onSearch={(query) => {}}
  onSelect={(s) => go(s.value)}
/>

Props

Prop	Type	Default	Description
`placeholder`	`string`	`"Search destinations..."`	The hint.
`suggestions`	`{ value; label; category? }[]`	`[]`	Grouped by category.
`onSearch`	`(query: string) => void`	—	On every keystroke.
`onSelect`	`(suggestion) => void`	—	When one is picked (Enter picks the highlighted one). With none highlighted, Enter submits the form the search sits in.
`className`	`string`	—	More classes, merged with the component’s own (tailwind-merge).

placeholder

Type: string

Default: "Search destinations..."

The hint.

suggestions

Type: { value; label; category? }[]

Default: []

Grouped by category.

onSearch

Type: (query: string) => void

Default: —

On every keystroke.

onSelect

Type: (suggestion) => void

Default: —

When one is picked (Enter picks the highlighted one). With none highlighted, Enter submits the form the search sits in.

className

Type: string

Default: —

More classes, merged with the component’s own (tailwind-merge).