Combobox

A searchable dropdown with autocomplete, multi-select, and create-new functionality.

Installation

bash

npx @smicolon/cli add combobox

Run init once per project before adding components. See Installation.

Preview

Searchable

Multi-select

Creatable

States

Props

Prop	Type	Default	Description
`options`	`ComboboxOption[]`	—	Options to choose from.
`value`	`string \| string[]`	—	Selected value, or values when `multiple`.
`onChange`	`(value) => void`	—	Called when the selection changes.
`placeholder`	`string`	`"Select option..."`	Text shown before a choice.
`searchPlaceholder`	`string`	`"Search..."`	Placeholder of the search field.
`multiple`	`boolean`	`false`	Allows several selections.
`creatable`	`boolean`	`false`	Lets the user add a new option.
`onCreate`	`(value) => void`	—	Called with the new option’s text.
`emptyText`	`string`	`"No options found."`	Text when nothing matches.
`createText`	`string`	`"Create"`	Label of the create option.
`loading`	`boolean`	`false`	Shows the loading state.
`loadingText`	`string`	`"Loading..."`	Text shown while loading.
`openLabel`	`string`	`"Open"`	Toggle’s accessible name when closed.
`closeLabel`	`string`	`"Close"`	Toggle’s accessible name when open.
`removeLabel`	`(label) => string`	—	Accessible name of a chip’s remove button.
`disabled`	`boolean`	`false`	Disables the combobox and dims it.
`className`	`string`	—	Extra classes for the component.

Usage

tsx

import { Combobox } from "@/components/ui/combobox"

const options = [
  { value: "sa", label: "Saudi Arabia" },
  { value: "ae", label: "United Arab Emirates" },
  { value: "eg", label: "Egypt" },
]

// Basic combobox
<Combobox
  options={options}
  placeholder="Select an option…"
/>

// Controlled with search
const [value, setValue] = useState("")

<Combobox
  options={options}
  value={value}
  onChange={setValue}
/>

// Multi-select
<Combobox
  options={options}
  multiple
  value={selectedValues}
  onChange={setSelectedValues}
/>

// Creatable
<Combobox
  options={options}
  creatable
  onCreate={(value) => {
    // Add new option to your list
  }}
/>