Combobox

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

Installation

tsx

npx @smicolon/smi-ui add combobox

Preview

Searchable

Multi-select

Creatable

States

Usage

tsx

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

const options = [
  { value: "react", label: "React" },
  { value: "vue", label: "Vue" },
  { value: "angular", label: "Angular" },
]

// Basic combobox
<Combobox
  options={options}
  placeholder="Select 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
  }}
/>