Suggestion is installed into your project as a file you own. It takes the same props as Ant Design X's Suggestion and adds none of its own. The submenu arrow comes from your icon pack.
Install
npx antuikit@latest init
npx antuikit@latest add suggestion
The first command installs AntuikitProvider and the theme tokens, the second adds this component.
Import
From @/components/ui/suggestion, never from @ant-design/x. The file lives in your project, so the import is a path, not a package. SuggestionItem, the type of one menu entry, comes from the same file.
import { Suggestion, type SuggestionItem } from "@/components/ui/suggestion"
Opening the menu
Suggestion does not render an input. You render it from children, a function, and decide when the menu opens.
Call onTrigger() to open the menu, usually when the reader types a trigger character like / or @.
Call onTrigger(false) to close it, for example when the trigger character is deleted. Picking an item, pressing Escape or clicking outside closes it too.
Pass onKeyDown to your input. Without it the arrow keys do not move through the menu and Enter sends the message instead of picking an item.
Each item takes a label and a value, plus an optional icon before the label and extra after it.
An item with children opens a second column. Only an item with no children can be picked.
items can be a function. Whatever you pass to onTrigger becomes its argument, so onTrigger(query) filters the list as the reader types. Type the argument with the generic: <Suggestion<string>>.
Width and placement
The menu opens above the input, where a chat input at the bottom of the page has room.
block makes the menu as wide as the input and pushes each item's extra to the far end of its row.
getPopupContainer moves the menu out of document.body. Point it at the scrolling container when the input sits inside one.
The menu is a Cascader, so other Cascader props, like disabled or popupRender, pass through.
Events
onSelect fires when the reader picks an item, with its value and the items on the path to it. Update your input here.
onOpenChange fires whenever the menu opens or closes. Pair it with open to control the menu yourself.
Styling
classNames and styles take three keys: root, content for the box around your input, and popup for the menu. The menu renders outside the component, so popup is the way to reach it.