Suggestion

Components used to provide users with quick prompts.

When to use

Need to build an input box for a dialogue scenario.

Examples

Basic usage

Full-row width

Custom

API

SuggestionsProps

Prop	Description	Type	Default	Version
block	Is the width of the entire line	boolean	false	-
children	Custom input box	({ onTrigger, onKeyDown }) => VNode	-	-
items	Suggested List	SuggestionItem[] | ((info: T) => SuggestionItem[])	-	-
open	Controlled Open Panel	boolean	-	-
rootClassName	Root element style class name	string	-	-
onSelect	Select Suggestion Item Pullback	(value: string) => void	-	-
onOpenChange	Callback for panel open state changes	(open: boolean) => void	-	-

onTrigger

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

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

Suggestions Slots

Slot	Description	Type
default	Used to customize the input box

SuggestionItem

Property	Description	Type	Default	Version
children	Sub-items	SuggestionItem[]	-	-
extra	Extra content of the suggestion item	VNode	string	-
icon	Icon of the suggestion item	VNode	-	-
label	Display content of the suggestion item	VNode	string	-
value	Value of the suggestion item	string	-	-

Design Token

This component has no custom Component Token. Customize it through global Design Tokens.

Contributors

Contributors

Loading contributors…