AutoComplete

An input box or custom input control, with enhanced automatic completion functionality.

Install

npm install @arco-design/web-react@2.66.18

Import @arco-design/web-react/dist/css/arco.css at the entry and set the locale with ConfigProvider. React 19 projects must also import @arco-design/web-react/es/_util/react-19-adapter first, or imperative APIs such as Message and Modal cannot render.

Examples

Basic: Show input suggestions based on current input (drop-down selection).
Options: Pass in AutoComplete.Option as the children of the component instead of using data.
Custom input: Support custom input components.
Strict mode: Use strict=true to enable case-sensitive matching for options.
Advance: This example shows: 1. Add Tooltip, 2. Custom display, 3. Manipulate values.
With group: Complete the input according to the query result (with group).
Without group: Complete the input according to the query result (without group).
Custom Filter Rules: If you rely on user input to dynamically update options, override the default option filtering rules via the filterOption attribute, or set it to false to turn off the default filtering rules.

Examples come from the official Arco Design repository (MIT) at the commit published as npm 2.66.18. Some use online images or upload endpoints; network requests are disabled in previews.

API

AutoComplete

Property	Description	Type	DefaultValue	Version
allowClear	Whether to allow clear the content	boolean	`-`	-
defaultActiveFirstOption	Whether to highlight the first option by default	boolean	`true`	-
disabled	Whether to disable the autocomplete	boolean	`-`	-
error	Whether the textarea is error.(Deprecated, removed in the next major version, use status='error' instead)	boolean	`-`	-
loading	Whether the component is loading data.	boolean	`-`	2.10.0
strict	Case sensitive when set `strict: true`	boolean	`-`	-
defaultValue	The default value of the autocomplete.	string	`-`	-
placeholder	Placeholder of input	string	`-`	-
value	The value of the autocomplete.	string	`-`	-
status	Status	'error' \| 'warning'	`-`	2.45.0
children	Custom input/source data	ReactNode	`-`	-
className	Additional css class	string \| string[]	`-`	-
data	Data source	(string \| { value: string; name: string; [key: string]: any } \| ReactNode)[]	`-`	-
inputProps	Properties of Input component.	Partial<InputProps>	`-`	2.10.0
style	Additional style	CSSProperties	`-`	-
triggerProps	Pass all `Trigger` component properties	Partial<TriggerProps>	`-`	-
virtualListProps	Virtual scroll properties.	AvailableVirtualListProps	`-`	2.2.0
dropdownRender	Customize dropdown content	(menu: ReactNode) => ReactNode	`-`	-
filterOption	If it's true, filter options by input value. If it's a function, filter options base on the function.	boolean \| ((inputValue: string, option: ReactElement) => boolean)	`true`	-
getPopupContainer	To set the container of the dropdown.	(node: HTMLElement) => Element	`-`	-
onBlur	Callback when component is blurred	(event) => void	`-`	-
onChange	Callback when an option is selected or input value changes	(value: string, option?: OptionInfo) => void	`-`	-
onFocus	Callback when component gets focus	(event) => void	`-`	-
onPressEnter	Callback when Enter is pressed	(event, activeOption?: OptionInfo) => void	`-`	`activeOption` in 2.25.1
onSearch	Callback when searching items	(value: string) => void	`-`	-
onSelect	Callback when an option is selected.	(value: string, option: OptionInfo) => void	`-`	-
triggerElement	Custom trigger element	ReactElement \| (({ value }) => ReactElement)	`<Input />`	`() => ReactElement` in 2.31.0

OptionInfo

export interface OptionInfo extends PropsWithChildren<OptionProps> {
  child?: ReactElement;
  _valid: boolean;
  _index: number;
  _origin: "children" | "options" | "userCreatedOptions" | "userCreatingOption";
}

AvailableVirtualListProps

export type AvailableVirtualListProps = Pick<
  VirtualListProps<any>,
  | "height"
  | "itemHeight"
  | "threshold"
  | "isStaticItemHeight"
  | "scrollOptions"
  | "onScroll"
  | "wrapperChild"
>;

AutoComplete.Option

Same as Select.Option, refer to Select.

AutoComplete.OptGroup

Same as Select.OptGroup, refer to Select.