Autocomplete

A text input with dynamic suggestions that helps users find and select values quickly.

#Installation

npx @dinachi/cli@latest add autocomplete

#Usage

tsx

import {
  Autocomplete,
  AutocompleteInput,
  AutocompleteTrigger,
  AutocompleteClear,
  AutocompleteContent,
  AutocompleteList,
  AutocompleteItem,
  AutocompleteGroup,
  AutocompleteGroupLabel,
  AutocompleteEmpty,
  AutocompleteStatus,
  AutocompleteSeparator,
} from "@/components/ui/autocomplete"

#Examples

Default Autocomplete

A text input with type-ahead suggestions

Autocomplete with Groups

Autocomplete with grouped suggestion categories

Autocomplete with Clear

Autocomplete with a clear button to reset input

#API Reference

#Autocomplete (Root)

Prop	Type	Default	Description
items	T[] \| GroupedItems[]	—	The items to display. Can be a flat array or an array of groups (objects with value and items properties).
mode	'list' \| 'both' \| 'inline' \| 'none'	'list'	Controls filtering and inline autocompletion. 'list' filters items, 'both' filters and shows inline completion, 'inline' shows inline completion without filtering, 'none' disables both.
openOnInputClick	boolean	false	Whether the popup opens when clicking the input.
value	string	—	The controlled input value.
defaultValue	string	—	The uncontrolled initial input value.
onValueChange	(value: string, eventDetails) => void	—	Callback fired when the input value changes.
onOpenChange	(open: boolean, eventDetails) => void	—	Callback fired when the popup is opened or closed.
autoHighlight	boolean \| 'always'	false	Whether the first matching item is highlighted automatically.
keepHighlight	boolean	false	Whether the highlighted item is preserved when the pointer leaves the list.
disabled	boolean	false	Whether the component should ignore user interaction.

#AutocompleteItem

Prop	Type	Default	Description
value	any	—	The value of the item. Required.
inset	boolean	false	Adds additional left padding for nested item layouts.

#AutocompleteGroup

Prop	Type	Default	Description
items	any[]	—	Items to be rendered within this group. Child Collection components will use these items.

#Other Parts

Prop	Type	Default	Description
AutocompleteContent.portal	boolean	true	Whether to render in a portal. Set to false inside Dialog or Drawer.
AutocompleteTrigger.children	React.ReactNode	—	Optional custom trigger content. Defaults to a chevron icon.
AutocompleteClear.children	React.ReactNode	—	Optional custom clear content. Defaults to an X icon.