Autocomplete

Interactive

See Autocomplete in Storybook for every variant, with live controls.

A searchable single-select combobox. Filters as you type, with keyboard navigation.

import { Autocomplete } from "@kairosis/eidos";

<Autocomplete
  label="Service"
  options={[
    { value: "api", label: "api-gateway", icon: "server", hint: "#4021" },
    { value: "auth", label: "auth-service", icon: "shield", hint: "#4022" },
  ]}
  value={service}
  onChange={setService}
/>;

Props

Prop	Type	Default	Description
`label`	`string`	—	Rendered above the control
`options`	`(string \| AutocompleteOption)[]`	—	Required
`value`	`string \| null`	—	Selected value; `null` is none
`onChange`	`(value: string \| null) => void`	—	Fires with `null` when cleared
`placeholder`	`string`	`"Search…"`
`icon`	`IconName`	`"search"`	Leading icon
`emptyText`	`string`	`"No matches"`	Shown when nothing matches

AutocompleteOption is { value, label, icon?, hint? } — hint renders mono at the right edge, for a count or ID.

Guidelines

Keyboard: ↑/↓ move the cursor, Enter selects, Escape closes. Clicking outside closes.
Focus stays in the input while arrowing, so the highlighted option is named with aria-activedescendant — a screen reader follows the highlight instead of announcing nothing.
Matching is a case-insensitive substring across label and hint, so an ID is searchable.
Controlled only — it holds the query and open state, but the selected value is yours.
When something is selected, the trailing chevron becomes a clear button.

Props​

Guidelines​

Props

Guidelines