Mentions

Used to mention someone or something in an input.

Importimport{ Mentions }from"antd";

Sourcecomponents/mentions

Docs

Edit this page Changelog

When To Use

When you need to mention someone or something.

Usage upgrade after 5.1.0

Upgrade Tip

After version 5.1.0, we provide a simpler usage <Mentions options={[...]} /> with better performance and potential of writing simpler code style in your applications. Meanwhile, we deprecated the old usage in browser console, we will remove it in antd 6.0.

// works when >=5.1.0, recommended ✅
const options = [{ value: 'sample', label: 'sample' }];
return <Mentions options={options} />;

// works when <5.1.0, deprecated when >=5.1.0 🙅🏻‍♀️
return (
  <Mentions onChange={onChange}>
    <Mentions.Option value="sample">Sample</Mentions.Option>
  </Mentions>
);

Examples

Basic

Basic usage.

Asynchronous loading

async.

Customize Trigger Token

Customize Trigger Token by prefix props. Default to @, Array<string> also supported.

Placement

Change the suggestions placement.

autoSize

Height autoSize.

Variants

Variants of Mentions.

5.13.0

With Form

Controlled mode, for example, to work with Form.

disabled or readOnly

Configure disabled and readOnly.

With clear icon

Customize clear button.

Status

Add status to Mentions with status, which could be error or warning。

API

Common props ref：Common props

Mention

Property	Description	Type	Default	Version
allowClear	If allow to remove mentions content with clear icon	boolean \| { clearIcon?: ReactNode }	false	5.13.0
autoFocus	Auto get focus when component mounted	boolean	false
autoSize	Textarea height autosize feature, can be set to true \| false or an object { minRows: 2, maxRows: 6 }	boolean \| object	false
defaultValue	Default value	string	-
filterOption	Customize filter option logic	false \| (input: string, option: OptionProps) => boolean	-
getPopupContainer	Set the mount HTML node for suggestions	() => HTMLElement	-
notFoundContent	Set mentions content when not match	ReactNode	`Not Found`
placement	Set popup placement	`top` \| `bottom`	`bottom`
prefix	Set trigger prefix keyword	string \| string[]	`@`
split	Set split string before and after selected mention	string
status	Set validation status	'error' \| 'warning' \| 'success' \| 'validating'	-	4.19.0
validateSearch	Customize trigger search logic	(text: string, props: MentionsProps) => void	-
value	Set value of mentions	string	-
variant	Variants of Input	`outlined` \| `borderless` \| `filled`	`outlined`	5.13.0
onBlur	Trigger when mentions lose focus	() => void	-
onChange	Trigger when value changed	(text: string) => void	-
onClear	Callback when click the clear button	() => void	-	5.20.0
onFocus	Trigger when mentions get focus	() => void	-
onResize	The callback function that is triggered when textarea resize	function({ width, height })	-
onSearch	Trigger when prefix hit	(text: string, prefix: string) => void	-
onSelect	Trigger when user select the option	(option: OptionProps, prefix: string) => void	-
onPopupScroll	Trigger when mentions scroll	(e: Event) => void	-	5.23.0
options	Option Configuration	Options	[]	5.1.0

Mention methods

Name	Description
blur()	Remove focus
focus()	Get focus

Option

Property	Description	Type	Default
label	Title of the option	React.ReactNode	-
key	The key value of the option	string	-
disabled	Optional	boolean	-
className	className	string	-
style	The style of the option	React.CSSProperties	-

Design Token

Component TokenHow to use?

Token Name	Description	Type	Default Value
activeBg	Background color when the input box is activated	string	#ffffff
activeBorderColor	Active border color	string	#1677ff
activeShadow	Box-shadow when active	string	0 0 0 2px rgba(5,145,255,0.1)
addonBg	Background color of addon	string	rgba(0,0,0,0.02)
controlItemWidth	Height of menu item	string \| number	100
dropdownHeight	Height of popup	string \| number	250
errorActiveShadow	Box-shadow when active in error status	string	0 0 0 2px rgba(255,38,5,0.06)
hoverBg	Background color when the input box hovers	string	#ffffff
hoverBorderColor	Hover border color	string	#4096ff
inputFontSize	Font size	number	14
inputFontSizeLG	Font size of large	number	16
inputFontSizeSM	Font size of small	number	14
paddingBlock	Vertical padding of input	number	4
paddingBlockLG	Vertical padding of large input	number	7
paddingBlockSM	Vertical padding of small input	number	0
paddingInline	Horizontal padding of input	number	11
paddingInlineLG	Horizontal padding of large input	number	11
paddingInlineSM	Horizontal padding of small input	number	7
warningActiveShadow	Box-shadow when active in warning status	string	0 0 0 2px rgba(255,215,5,0.1)
zIndexPopup	z-index of popup	number	1050

Ant Design