logoAnt Design X

DesignDevelopmentComponentsX MarkdownX SDKPlayground
  • Introduction
  • Overview
  • Common
    • Bubble
    • Conversations
    • Notification
  • Confirmation
    • Sources
    • Think
    • ThoughtChain
  • Wake
    • Welcome
    • Prompts
  • Express
    • Attachments
    • Sender
    • Suggestion
  • Feedback
    • Actions
    • FileCard
  • Others
    • XProvider

Suggestion

A suggestion component for chat.
Importimport { Suggestion } from "@ant-design/x";
Sourcecomponents/suggestion
Docs
Edit this page...
Changelog

When To Use

  • Need to build an input box for a dialogue scenario

Examples

API

Common props ref:Common props

suggestionProps

PropertyDescriptionTypeDefaultVersion
blockTake up the full widthbooleanfalse-
childrenCustom input box({ onTrigger, onKeyDown }) => ReactElement--
itemsSuggestion listSuggestionItem[] | ((info: T) => SuggestionItem[])--
openControlled open panelboolean--
rootClassNameRoot element class namestring--
onSelectCallback when the suggestion item is selected(value: string) => void--
onOpenChangeCallback when the panel open state changes(open: boolean) => void--

onTrigger

typescript
type onTrigger<T> = (info: T | false) => void;

Suggestion accepts generics to customize the parameter type passed to items renderProps. When false is passed, the suggestion panel is closed.

SuggestionItem

PropertyDescriptionTypeDefaultVersion
childrenChild item for the suggestion itemSuggestionItem[]--
extraExtra content for the suggestion itemReactNode--
iconIcon for the suggestionReactNode--
labelContent to display for the suggestionReactNode--
valueValue of the suggestion itemstring--

Theme Variables (Design Token)

Basic

Basic usage. State management in controlled. Custom trigger.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Block

Set block to display in a whole row. extra can be used to configure additional information.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Customize

Dynamically display suggestions with multiple tags based on input.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
 
可任意输入 / 与 # 多次获取建议