Mentions

Mention component.

When To Use

When you need to mention someone or something.

Usage upgrade after 5.1.0

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.

With Form

Controlled mode, for example, to work with Form.

disabled or readOnly

Configure disabled and readOnly.

autoSize

Height autoSize.

Asynchronous loading

async.

Customize Trigger Token

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

Placement

Change the suggestions placement.

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
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	-
onBlur	Trigger when mentions lose focus	() => void	-
onChange	Trigger when value changed	(text: string) => void	-
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	-
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 Token

Global Token

// 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.Option value="sample">Sample</Mentions.Option>

</Mentions>

);

API

Common props ref：Common props

Mention

Property	Description	Type	Default	Version
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	-
onBlur	Trigger when mentions lose focus	() => void	-
onChange	Trigger when value changed	(text: string) => void	-
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	-
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	-

Namu Design

Mentions

Namu Design

Mentions

When To Use

Usage upgrade after 5.1.0

Examples

API

Mention

Mention methods

Option

Design Token

Component Token

Global Token

When To Use

Usage upgrade after 5.1.0

Examples

API

Mention

Mention methods

Option

Design Token

Component Token

Global Token

MentionsChangelog

MentionsChangelog

When To Use

Usage upgrade after 5.1.0

Examples

API

Mention

Mention methods

Option

Design Token

Component Token

Global Token

When To Use

Usage upgrade after 5.1.0

Examples

API

Mention

Mention methods

Option

Design Token

Component Token

Global Token

Mentions

Mentions