Combobox

Advanced combobox with single and multi-select support

Single

Usage

import { Combobox } from '@tryvienna/ui'

<div className="w-64">
  <Combobox
    options={fruitOptions}
    value={value}
    onValueChange={setValue}
    placeholder="Select a fruit..."
    searchPlaceholder="Search fruits..."
  />
  <p className="mt-4 text-xs text-muted-foreground">
    Selected: &quot;{value || '(none)'}&quot;
  </p>
</div>

Examples

Single

Single

<div className="w-64">
  <Combobox
    options={fruitOptions}
    value={value}
    onValueChange={setValue}
    placeholder="Select a fruit..."
    searchPlaceholder="Search fruits..."
  />
  <p className="mt-4 text-xs text-muted-foreground">
    Selected: &quot;{value || '(none)'}&quot;
  </p>
</div>

Multi

Multi

<div className="w-72">
  <Combobox
    options={tagOptions}
    value={values}
    onValueChange={setValues}
    multiple
    placeholder="Select tags..."
    searchPlaceholder="Search tags..."
  />
  <p className="mt-4 text-xs text-muted-foreground">
    Selected: {values.length > 0 ? values.join(', ') : '(none)'}
  </p>
</div>

Creatable

Creatable

<div className="w-72">
  <Combobox
    options={options}
    value={values}
    onValueChange={setValues}
    multiple
    placeholder="Select frameworks..."
    searchPlaceholder="Search or create..."
    onCreateOption={handleCreate}
  />
  <p className="mt-4 text-xs text-muted-foreground">
    Selected: {values.length > 0 ? values.join(', ') : '(none)'}
  </p>
  <p className="mt-1 text-xs text-muted-foreground">
    Type a new name and select &quot;Create&quot; to add it.
  </p>
</div>

API Reference

Combobox

Prop	Type	Default	Description
options	ComboboxOption[] | ComboboxGroup[]	-
value	string | string[]	-
onValueChange	((value: string) => void) | ((value: string[]) => void)	-
multiple	boolean	false
placeholder	string	Select...
searchPlaceholder	string	Search...
emptyText	string	No results found.
disabled	boolean	false
onCreateOption	((inputValue: string) => void) | undefined	-

Data Attributes

Component	data-slot
Combobox	"combobox"