logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.25.0
  • Components Overview
  • General
    • Button
    • FloatButton
      5.0.0
    • Icon
    • Typography
  • Layout
    • Divider
    • Flex
      5.10.0
    • Grid
    • Layout
    • Space
    • Splitter
      5.21.0
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
    • Tabs
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • ColorPicker
      5.5.0
    • DatePicker
    • Form
    • Input
    • InputNumber
    • Mentions
    • Radio
    • Rate
    • Select
    • Slider
    • Switch
    • TimePicker
    • Transfer
    • TreeSelect
    • Upload
  • Data Display
    • Avatar
    • Badge
    • Calendar
    • Card
    • Carousel
    • Collapse
    • Descriptions
    • Empty
    • Image
    • List
    • Popover
    • QRCode
      5.1.0
    • Segmented
    • Statistic
    • Table
    • Tag
    • Timeline
    • Tooltip
    • Tour
      5.0.0
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
    • Watermark
      5.1.0
  • Other
    • Affix
    • App
      5.1.0
    • ConfigProvider
    • Util
      5.13.0

Mentions

Used to mention someone or something in an input.
Importimport { Mentions } from "antd";
Sourcecomponents/mentions
Docs
Edit this pageChangelog

Resources

Ant Design X
Ant Design Charts
Ant Design Pro
Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Web3
Ant Design Landing-Landing Templates
Scaffolds-Scaffold Market
Umi-React Application Framework
dumi-Component doc generator
qiankun-Micro-Frontends Framework
Ant Motion-Motion Solution
China Mirror 🇨🇳

Community

Awesome Ant Design
Medium
Twitter
yuque logoAnt Design in YuQue
Ant Design in Zhihu
Experience Cloud Blog
seeconf logoSEE Conf-Experience Tech Conference

Help

GitHub
Change Log
FAQ
Bug Report
Issues
Discussions
StackOverflow
SegmentFault

Ant XTech logoMore Products

yuque logoYuQue-Document Collaboration Platform
AntV logoAntV-Data Visualization
Egg logoEgg-Enterprise Node.js Framework
Kitchen logoKitchen-Sketch Toolkit
Galacean logoGalacean-Interactive Graphics Solution
xtech logoAnt Financial Experience Tech
Theme Editor
Made with ❤ by
Ant Group and Ant Design Community
loading

When To Use

When you need to mention someone or something.

Usage upgrade 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.

jsx
// 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

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 | filled | underlinedoutlined5.13.0 | underlined: 5.24.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?
Basic

Basic usage.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Asynchronous loading

async.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Customize Trigger Token

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Placement

Change the suggestions placement.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
autoSize

Height autoSize.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Variants

Variants of Mentions, there are four variants: outlined filled borderless and underlined.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
5.13.0
With Form

Controlled mode, for example, to work with Form.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
disabled or readOnly

Configure disabled and readOnly.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
With clear icon

Customize clear button.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Status

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code