Combobox

import { Combobox } from 'yarcl';

One component covers three modes.

Searchable select

The default. Typing filters the options; the value must be one of them. On blur, the text resets to the selected option’s label.

Country

Value: none

<Combobox options={countries} value={country} onValueChange={setCountry} placeholder="Search countries" />

Typeahead

allowCustomValue accepts any text; the options are suggestions.

Framework

Value: none

<Combobox options={frameworks} allowCustomValue onValueChange={setValue} />

Async search

Filter on the server: set filter={false}, update options from onInputValueChange, and show loading in between.

Remote search

Results arrive after 500 ms.

<Combobox
  options={results}
  filter={false}
  loading={loading}
  onInputValueChange={setQuery}
  emptyMessage="No countries found"
/>

Keyboard

Key	Action
typing	filters and opens the list, highlighting the first match
↑ ↓	moves the highlight (focus stays in the input)
Enter	chooses the highlighted option
Esc	closes the list

The input has role="combobox" and points at the highlighted option with aria-activedescendant.

Props

Accepts every native <input> attribute except color, size, value, defaultValue and onChange.

Prop	Type	Default	Description
options required	readonly SelectOption<V>[]		The options to suggest. For async search, update this as results arrive and set filter={false}.
allowCustomValue	boolean	false	Accepts typed text that doesn't match an option (typeahead / autocomplete). When false, the input resets to the selected option's label on blur.
color	Colorconfig	config.defaults.color	Semantic color, from the colors config.
defaultValue	V | null	null	Initial selected value when uncontrolled.
emptyMessage	ReactNode	'No results'	Shown when no options match.
filter	boolean | (option: SelectOption<V>, text: string) => boolean	true	How options are matched against the typed text. true: case-insensitive "contains" on the label; a function for custom matching; false to show options as given (e.g. already filtered by a server).
inputValue	string		Controlled text in the input.
loading	boolean		Shows a loading row instead of options.
loadingMessage	ReactNode	'Loading…'	Shown while loading is set.
onInputValueChange	(text: string) => void		Called on every keystroke with the input text. Use it to fetch options for async search.
onValueChange	(value: V | null) => void		Called when an option is chosen, or with the typed text when allowCustomValue is set.
radius	'size' | Radiusconfig	config.defaults.radius	Border radius, from the radii config, or 'size' for the radius named like the control's size.
size	Sizeconfig	config.defaults.size	Control size, from the sizes config.
value	V | null		Controlled selected value. null means nothing is selected.