antuikit's AutoComplete is Ant Design's AutoComplete, installed into your project as a file you own. It adds a ref and keeps both generic parameters, so the API table below matches Ant Design's with one row marked antuikit.
The file sets no icon. The clear icon comes from AntuikitProvider's Select config and follows whichever icon pack is installed, so the registry item needs no icon pack of its own.
Install
npx antuikit@latest init
npx antuikit@latest add auto-complete
The first command installs AntuikitProvider and the theme, and the second adds AutoComplete.
Import
From @/components/ui/auto-complete, never from antd. The file is yours once it is installed, so the import path is a path in your project rather than a package.
import { AutoComplete } from "@/components/ui/auto-complete"
The axes
The enumerated props, and the values each one takes. These are the axes the Design tab's Figma properties correspond to. AutoComplete adds none of its own, and these three are the same as Select's.
size takes small, medium, large, and inherits from ConfigProvider or the surrounding Form when it is not passed. middle is the pre-v6 spelling of medium and is deprecated. Do not pass it with a custom children input, which sizes itself.
variant takes outlined (the default), filled, borderless and underlined. It is a surface decision, so set it once on the provider rather than per field.
status takes error and warning, and is set for you from the field's own validation inside a Form.Item. It recolors the border and nothing else, so the message is still yours to write.
AutoComplete has no mode prop. For a field with more than one value, use Select with mode='multiple' or 'tags'.
Flags
Each of these turns one behavior on. Two of them, filterOption and defaultActiveFirstOption, default the opposite way to Select's.
allowClear (false) adds a clear mark once there is text. It also takes an object, so { clearIcon } replaces the glyph the provider supplied.
disabled (false) takes the field out of the tab order entirely. Prefer readOnly for a value that exists but is not editable yet.
backfill (false) writes the arrowed row's value into the field as you move through the list. Only the keyboard triggers it, never hover.
filterOption (false, unlike Select) turns client-side matching off, because the server or your own onSearch is assumed to have filtered already. true gets a case-insensitive substring match, and a function gets anything else.
defaultActiveFirstOption (false, unlike Select) leaves the list with nothing highlighted, so Enter submits the typed text rather than taking the first row.
popupMatchSelectWidth (true) pins the popup to the field's width. A number pins it to that many pixels instead.
autoFocus (false) focuses on mount. One per page, on the field the page exists for.
virtual renders only the rows in view. Passing it explicitly also changes what assistive tech sees, which the Accessibility tab covers.
Slots
The props that take a node. A slot is where your own markup goes, and it is the route to reach for before a descendant selector, which matters more than usual here because the popup is a portal.
children is the big one: a single element replaces the built-in input, which is how a Input.TextArea or an Input with an addon becomes the trigger. The popup and the keyboard behavior stay the same. Two children are read as legacy Option nodes instead.
An option's own label takes any node, which is the cheapest way to get an icon, a count or a two-line row into the list.
optionRender renders one row from the option's raw data rather than its label, for a row built from fields the label does not carry.
popupRender wraps the whole list, for a footer or a divider under the suggestions.
notFoundContent is the empty state, and it defaults to null here rather than to an Empty, so zero suggestions means no popup at all. Pass a node to get one back.
prefix puts a node inside the field, before the text. It is decoration and carries no accessible name.
suffixIcon defaults to null, so no arrow is drawn, and a value you pass still shows. loadingIcon does nothing, because AutoComplete has no loading prop. Show a pending state in the popup instead.
Events
onOpenChange
Styling
classNames and styles take the same keys, one per part. Reach for them before a descendant selector, since a keyed part stays stable across versions.
1
<AutoComplete
2
classNames={{
3
root: "…",
4
prefix: "…",
5
input: "…",
6
placeholder: "…",
7
content: "…",
8
popup: "…",
9
}}
10
/>
A Tailwind class on one of these keys wins without !important. Setting a component token's CSS variable on the root has no effect, so style the part instead.
API Reference
AutoComplete
AutoComplete's props. Rows marked antuikit in the Version column are added by the kit.