Autocomplete

Preview

Installation


pnpm dlx @olyx/cli@latest add autocomplete

Usage

import {
  Autocomplete,
  AutocompleteEmpty,
  AutocompleteInput,
  AutocompleteItem,
  AutocompleteList,
  AutocompletePopup,
  AutocompleteGroup,
  AutocompleteGroupLabel,
  AutocompleteSeparator,
} from "@/components/ui/autocomplete"

const items = [
  { value: "apple", label: "Apple" },
  { value: "banana", label: "Banana" },
  { value: "orange", label: "Orange" },
]
 
<Autocomplete items={items}>
  <AutocompleteInput placeholder="Search..." />
  <AutocompletePopup>
    <AutocompleteEmpty>No results found.</AutocompleteEmpty>
    <AutocompleteList>
      {(item) => (
        <AutocompleteItem key={item.value} value={item}>
          {item.label}
        </AutocompleteItem>
      )}
    </AutocompleteList>
  </AutocompletePopup>
</Autocomplete>

API Reference

Root component managing state and providing context to child components.

Prop	Type	Description
`items`	`readonly unknown[]`	Array of items to display
`open`	`boolean`	Controls popup open state
`disabled`	`boolean`	Disables the autocomplete
`autoHighlight`	`boolean`	Auto-highlight first match
`inlineAutocompletion`	`boolean`	Inline suggestion while typing
`value`	`unknown`	Currently selected value
`...props`	Base UI Autocomplete props	All standard autocomplete attributes are supported

AutocompleteInput

Input field with support for icons and action buttons.

Prop	Type	Default	Description
`startAddon`	`React.ReactNode`	-	Icon or element at input start
`showTrigger`	`boolean`	`false`	Display trigger (chevron) button
`showClear`	`boolean`	`false`	Display clear (X) button
`...props`	Base UI Autocomplete Input props	-	All standard autocomplete input attributes are supported

AutocompletePopup

Popup container for suggestions and results.

Prop	Type	Description
`children`	`React.ReactNode`	Content inside popup
`side`	`string`	Popup placement side
`...props`	Base UI Autocomplete Popup props	All standard autocomplete popup attributes are supported

AutocompleteList

Scrollable container for autocomplete items.

Prop	Type	Description
`children`	`React.ReactNode`	List item elements
`...props`	Base UI Autocomplete List props	All standard autocomplete list attributes are supported

AutocompleteItem

Individual selectable item in the list.

Prop	Type	Description
`value`	`unknown`	Item value
`children`	`React.ReactNode`	Item label/content
`...props`	Base UI Autocomplete Item props	All standard autocomplete item attributes are supported