Forms Combobox

Combobox

Type to find, then pick — every place Zostel is live, in one box.

Preview

Where to?

Usage

tsx

import { Combobox } from "zostel-ui";

const places = [
  { value: "manali", label: "Manali, Himachal Pradesh" },
  { value: "pokhara", label: "Pokhara, Nepal" },
  { value: "phuket", label: "Phuket, Thailand" },
];

<Combobox
  options={places}
  value={place}
  onValueChange={setPlace}
  placeholder="Pick a place"
  searchPlaceholder="Type a place…"
  emptyText="Not a Zostel place yet."
/>

Props

Prop	Type	Default	Description
`options`	`{ value: string; label: string }[]`	—	What can be picked.
`value`	`string`	—	The chosen value.
`onValueChange`	`(value: string) => void`	—	Called with the new value ("" when cleared).
`placeholder`	`string`	—	Shown when nothing is picked.
`searchPlaceholder`	`string`	—	Hint inside the search box.
`emptyText`	`string`	—	Shown when nothing matches.
`disabled`	`boolean`	`false`	Greys it out.
`aria-labelledby · aria-label`	`string`	—	Its name: the label, then what the trigger shows (“Pick a place, Manali”), the visible words in it. The trigger is the Button’s field look: its edge clears 3:1 by day and at night.
`className`	`string`	—	More classes, merged with the component’s own (tailwind-merge).

options

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

Default: —

What can be picked.

value

Type: string

Default: —

The chosen value.

onValueChange

Type: (value: string) => void

Default: —

Called with the new value ("" when cleared).

placeholder

Type: string

Default: —

Shown when nothing is picked.

searchPlaceholder

Type: string

Default: —

Hint inside the search box.

emptyText

Type: string

Default: —

Shown when nothing matches.

disabled

Type: boolean

Default: false

Greys it out.

aria-labelledby · aria-label

Type: string

Default: —

Its name: the label, then what the trigger shows (“Pick a place, Manali”), the visible words in it. The trigger is the Button’s field look: its edge clears 3:1 by day and at night.

className

Type: string

Default: —

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