Combobox

Combobox is a select you can type into. Use it when the option list is long enough that scanning a dropdown is painful.

Usage

import { Combobox } from "@sina-design-system/core";

<Combobox
  options={[
    { value: "usd", label: "US Dollar" },
    { value: "eur", label: "Euro" },
  ]}
  value={currency}
  onValueChange={setCurrency}
  placeholder="Search currencies"
/>

Examples

Controlled · value + onValueChange

With descriptions · option.description

Disabled & no results

Props

Prop	Type	Default	Description
`options`	`ComboboxOption[]`	—	The { value, label } items to choose from.
`value`	`string`	—	The selected value (controlled).
`onValueChange`	`(value: string) => void`	—	Fires on selection.
`placeholder`	`string`	—	Empty-state text in the input.

Accessibility

Built on a Popover with a native input. Arrow keys move through matches, Enter selects, and the listbox is announced to screen readers.