AsyncAutoComplete

An MUI Autocomplete that fetches options from an async source as the user types, with built-in debounce and loading state.

📖 Storybook

Preview

Live preview↗ Open in Storybook

Import

// Original
import { AsyncAutoComplete } from "@xocialive/ui-components";

// V2 — recommended for new code (typed, more flexible)
import { AsyncAutoCompleteV2 } from "@xocialive/ui-components";
import type { AsyncAutoCompleteV2Props } from "@xocialive/ui-components";

V2 basic usage

<AsyncAutoCompleteV2
  label="Assign user"
  fetchOptions={async (search) => {
    const res = await api.get(`/users?q=${search}`);
    return res.data.map((u) => ({ label: u.name, value: u.id }));
  }}
  value={selectedUser}
  onChange={(opt) => setSelectedUser(opt)}
/>

V2 Props

Prop	Type	Default	Description
label	string	—	Input label
fetchOptions	(search: string) => Promise<Option[]>	—	Async option loader
value	Option | null	—	Controlled value
onChange	(option: Option | null) => void	—	Change handler
debounceMs	number	300	Debounce delay for fetch calls
minChars	number	0	Minimum characters before fetching
disabled	boolean	false	Disables the input
placeholder	string	—	Input placeholder
sx	SxProps<Theme>	—	Root element style overrides

Option type

type Option = {
  label: string;
  value: string | number;
};