Combobox

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

Installation

npx dafink-ui add combobox

Demo

Language (single)

Type to filter. Kotlin is disabled.

Languages (multi)

TypeScriptPython

Backspace on empty input removes the last chip.

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.

Accessibility

Combobox keeps real DOM focus in the <input role="combobox"> at all times; the highlighted option in the listbox is virtual focus only, communicated via aria-activedescendant against a role="listbox"/role="option" list — never real roving tabindex on the options. It is non-modal and never trapped: Tab closes the dropdown and moves on naturally.

Key	Function
`down arrow`	Opens the dropdown if closed; otherwise moves to the next enabled option, wrapping.
`up arrow`	Opens the dropdown if closed; otherwise moves to the previous enabled option, wrapping.
`home`	Jumps to the first enabled option.
`end`	Jumps to the last enabled option.
`enter`	Selects the active option.
`escape`	Closes the dropdown (focus stays in the input); clears the input if the dropdown is already closed.
`tab`	Closes the dropdown without returning focus, letting Tab land on the next page element naturally.
`backspace`	In multi-select mode, removes the last selected pill when the input is empty.