Combobox

A searchable dropdown that filters options as the user types, with single-select and multi-select (pill chip) modes.

Installation

npx @obi/ui add combobox

Preview

Language (single)

Type to filter. Kotlin is disabled.

Languages (multi)

TypeScriptPython

Backspace on empty input removes the last chip.

Usage

'use client';

import { useState } from 'react';
import { Combobox } from '@/src/components/Combobox/Combobox';

const LANGUAGES = [
  { value: 'ts',  label: 'TypeScript' },
  { value: 'js',  label: 'JavaScript' },
  { value: 'py',  label: 'Python'     },
  { value: 'rs',  label: 'Rust'       },
  { value: 'go',  label: 'Go'         },
];

export default function Example() {
  const [value, setValue] = useState('');
  const [multi, setMulti] = useState<string[]>([]);

  return (
    <div className="flex flex-col gap-6 max-w-sm">
      <Combobox
        label="Language"
        placeholder="Search languages…"
        options={LANGUAGES}
        value={value}
        onChange={setValue}
      />
      <Combobox
        label="Languages (multi)"
        placeholder="Search languages…"
        options={LANGUAGES}
        multiple
        value={multi}
        onChange={setMulti}
      />
    </div>
  );
}

Props

Name	Type	Default	Description
options	ComboboxOption[]	—	Array of { value, label, disabled? } objects.
value	string \| string[]	undefined	Controlled selected value.
onChange	(value: string \| string[]) => void	undefined	Called when selection changes.
multiple	boolean	false	Enables multi-select mode with pill chips.
placeholder	string	'Search…'	Placeholder shown in the input.
label	string	undefined	Visible label above the input.
hint	string	undefined	Helper text below the input.
error	string	undefined	Error message; switches input to error state.
size	'sm' \| 'md'	'md'	Input size.
disabled	boolean	false	Prevents all interaction.
className	string	''	Additional classes on the root wrapper.