DS0
Components

Combobox

An autocomplete input that filters options as the user types.

Overview

Combobox combines a text input with a dropdown listbox. As the user types, options are filtered in real-time. Supports single and multi-select modes, custom rendering, and async loading.

Usage

<Combobox
  options={['React', 'Vue', 'Angular', 'Svelte']}
  placeholder="Select a framework..."
  onSelect={handleSelect}
/>

Accessibility

KeyAction
ArrowDown/UpNavigate options
EnterSelect highlighted option
EscapeClose dropdown
TypingFilters options
  • Uses role="combobox" with aria-expanded, aria-autocomplete
  • Listbox uses role="listbox" with role="option" children

API Reference

PropTypeDefaultDescription
optionsstring[] | Option[][]Options list
valuestringControlled value
onSelect(value: string) => voidSelection handler
placeholderstringInput placeholder
multiplebooleanfalseMulti-select mode
ComponentWhen to Use Instead
SelectNo search/filter needed
CommandPaletteFull-page command interface

On this page