Combobox

An autocomplete input that combines a text input with a filtered dropdown list. Ideal for searching and selecting from large datasets like destinations, cities, or hostels.

Preview

Search Destination

Usage

tsx

import { Combobox } from "zostel-ui";

const destinations = [
  { value: "manali", label: "Manali" },
  { value: "rishikesh", label: "Rishikesh" },
  { value: "goa", label: "Goa" },
  { value: "jaipur", label: "Jaipur" },
];

<Combobox
  options={destinations}
  placeholder="Search destinations..."
  value={selected}
  onValueChange={setSelected}
  emptyText="No destinations found."
/>

Props

Prop	Type	Default	Description
`options`	`{ value: string; label: string }[]`	[]	Array of options to display in the dropdown.
`value`	`string`	—	The controlled selected value.
`onValueChange`	`(value: string) => void`	—	Called when the selected value changes.
`placeholder`	`string`	"Search..."	Placeholder text for the search input.
`emptyText`	`string`	"No results found."	Message shown when no options match the search.
`disabled`	`boolean`	false	Disables the combobox.
`className`	`string`	""	Additional CSS classes to apply.

options

Type: { value: string; label: string }[]

Default: []

Array of options to display in the dropdown.

value

Type: string

Default: —

The controlled selected value.

onValueChange

Type: (value: string) => void

Default: —

Called when the selected value changes.

placeholder

Type: string

Default: "Search..."

Placeholder text for the search input.

emptyText

Type: string

Default: "No results found."

Message shown when no options match the search.

disabled

Type: boolean

Default: false

Disables the combobox.

className

Type: string

Default: ""

Additional CSS classes to apply.

Previous Slider Next Form