Mentions

Used to mention someone or something in an input.
Importimport{ Mentions }from"antd";

When To Use

When you need to mention someone or something.

Usage upgrade after 5.1.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 usage.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

async.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

Change the suggestions placement.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

Height autoSize.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

Variants of Mentions.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
5.13.0

Controlled mode, for example, to work with Form.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

Configure disabled and readOnly.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code




Customize clear button.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

API

Common props ref:Common props

Mention

PropertyDescriptionTypeDefaultVersion
allowClearIf allow to remove mentions content with clear iconboolean | { clearIcon?: ReactNode }false5.13.0
autoFocusAuto get focus when component mountedbooleanfalse
autoSizeTextarea height autosize feature, can be set to true | false or an object { minRows: 2, maxRows: 6 }boolean | objectfalse
defaultValueDefault valuestring-
filterOptionCustomize filter option logicfalse | (input: string, option: OptionProps) => boolean-
getPopupContainerSet the mount HTML node for suggestions() => HTMLElement-
notFoundContentSet mentions content when not matchReactNodeNot Found
placementSet popup placementtop | bottombottom
prefixSet trigger prefix keywordstring | string[]@
splitSet split string before and after selected mentionstring
statusSet validation status'error' | 'warning' | 'success' | 'validating'-4.19.0
validateSearchCustomize trigger search logic(text: string, props: MentionsProps) => void-
valueSet value of mentionsstring-
variantVariants of Inputoutlined | borderless | filledoutlined5.13.0
onBlurTrigger when mentions lose focus() => void-
onChangeTrigger when value changed(text: string) => void-
onClearCallback when click the clear button() => void-5.20.0
onFocusTrigger when mentions get focus() => void-
onResizeThe callback function that is triggered when textarea resizefunction({ width, height })-
onSearchTrigger when prefix hit(text: string, prefix: string) => void-
onSelectTrigger when user select the option(option: OptionProps, prefix: string) => void-
onPopupScrollTrigger when mentions scroll(e: Event) => void-5.23.0
optionsOption ConfigurationOptions[]5.1.0

Mention methods

NameDescription
blur()Remove focus
focus()Get focus

Option

PropertyDescriptionTypeDefault
labelTitle of the optionReact.ReactNode-
keyThe key value of the optionstring-
disabledOptionalboolean-
classNameclassNamestring-
styleThe style of the optionReact.CSSProperties-

Design Token

Component TokenHow to use?

Token NameDescriptionTypeDefault Value
activeBgBackground color when the input box is activatedstring#ffffff
activeBorderColorActive border colorstring#1677ff
activeShadowBox-shadow when activestring0 0 0 2px rgba(5,145,255,0.1)
addonBgBackground color of addonstringrgba(0,0,0,0.02)
controlItemWidthHeight of menu itemstring | number100
dropdownHeightHeight of popupstring | number250
errorActiveShadowBox-shadow when active in error statusstring0 0 0 2px rgba(255,38,5,0.06)
hoverBgBackground color when the input box hoversstring#ffffff
hoverBorderColorHover border colorstring#4096ff
inputFontSizeFont sizenumber14
inputFontSizeLGFont size of largenumber16
inputFontSizeSMFont size of smallnumber14
paddingBlockVertical padding of inputnumber4
paddingBlockLGVertical padding of large inputnumber7
paddingBlockSMVertical padding of small inputnumber0
paddingInlineHorizontal padding of inputnumber11
paddingInlineLGHorizontal padding of large inputnumber11
paddingInlineSMHorizontal padding of small inputnumber7
warningActiveShadowBox-shadow when active in warning statusstring0 0 0 2px rgba(255,215,5,0.1)
zIndexPopupz-index of popupnumber1050

Global TokenHow to use?