AsyncAutocomplete

Autocomplete in different time and space.

Example

Props

🕹️ standard props
items
Item[]
List of selectable items.
[]
values
Item[]
Selected items.
[]
multiple
boolean
Allow multiple selections.
false
searcher
(params: { searchText: string }) => Promise<Item[]>
Function to fetch items based on search text.
placeholder
string
Placeholder text.
undefined
searchThreshold
number
Minimum search text length before triggering search.
2
debounceTimeout
number
Debounce time for search input.
500
searching
boolean
Indicates if search is in progress.
false
search
boolean
Trigger search manually.
false
searchText
string
Current search text.
undefined
maxVisibleChips
number
Maximum number of visible selected items.
undefined
menuOpened
boolean
Controls menu visibility.
false
mobileDrawer
boolean
Enable mobile-friendly drawer mode.
false
closeOnSelect
boolean
Close menu when item is selected.
false
disabled
boolean
Disable input.
false
menuWidth
string | null
The width of the menu.
null
menuAnchor
"bottom" | "bottom-center" | "right-center"
The anchor of the menu.
🎨 style props
No data available

Slots

chipLabelSnippet

Renders the label inside each chip.

Default content:

{selection.label}

Available variables:

Name	Type	Description
selection	ItemData	The selected item.

itemLabelSnippet

Renders the label of an item.

Default content:

{item.label}

Available variables:

Name	Type	Description
item	ItemData	The item to render the label for.

Events

onchange

Fired when the selection changes.

Attribute	Type	Description
unselect	ItemData | undefined	The item that was unselected.
select	ItemData | undefined	The item that was selected.
selection	ItemData[]	The current selection of items.