Autocomplete
Components

Autocomplete

Free-text combobox. Type to filter, arrow keys to navigate, Enter to commit. Distinct from Select.

Props

AutocompleteProps props
PropTypeDefaultDescription
optionsAutocompleteOption[]—Array of { value, label, description?, group?, icon?, disabled? } items.
valuestring | nullnullControlled selected value.
onChange(value: string | null, option: AutocompleteOption | null) => void—Selection change handler.
inputValuestring—Controlled query text. Pair with onInputChange for async/remote search.
onInputChange(query: string) => void—Input text change handler.
placeholderstring"Search…"Placeholder text.
filter(option: AutocompleteOption, query: string) => boolean—Replace the built-in substring match filter.
disableFilterboolean—Skip local filtering entirely (the server already filtered).
loadingboolean—Shows an inline spinner.
disabledboolean—Prevents interaction.
emptyMessageReactNode"No matches"Shown when the query produces zero results.
onCreate(query: string) => void—Show an inline 'Create …' row when the query matches nothing exactly.
createLabel(query: string) => ReactNode(q) => `Create “${q}”`Label for the create row.
clearablebooleantrueShow a clear button when a value is selected.
size"sm" | "md""md"Control height.
renderOption(option: AutocompleteOption, state: { active: boolean; selected: boolean }) => ReactNode—Replaces a row's contents. The row box, its padding and its active/selected backgrounds stay Onset's, so a custom row still highlights and scrolls into view like a built-in one.

Usage

Autocomplete is a free-text combobox: type to filter a list, ↑/↓ to move, Enter to commit, Esc to revert. It's distinct from Select (fixed option list, no typing) and TokenField (multi-value chips). For async/remote search, use inputValue + onInputChange + disableFilter.

Basic

Autocomplete

Loading state

Autocomplete loading

With onCreate

Autocomplete with onCreate

Grouped options

Autocomplete grouped
ImportTSX
import { Autocomplete } from "@solarius/onset";
import type { AutocompleteOption } from "@solarius/onset";

const services: AutocompleteOption[] = [
  { value: "nginx", label: "nginx", description: "Reverse proxy" },
  { value: "postgres", label: "postgres", description: "Relational database" },
];

<Autocomplete options={services} value={value} onChange={setValue} />
<Autocomplete options={services} onCreate={handleCreate} />
<Autocomplete options={groupedOptions} placeholder="Search..." />