logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.9.2
  • Components Overview
  • General
    • Button
    • FloatButtonNew
    • Icon
    • Typography
  • Layout
    • Divider
    • Grid
    • Layout
    • Space
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • ColorPickerNew
    • 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
    • QRCodeNew
    • Segmented
    • Statistic
    • Table
    • Tabs
    • Tag
    • Timeline
    • Tooltip
    • TourNew
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
    • Watermark
  • Other
    • Affix
    • AppNew
    • ConfigProvider
When To Use
Usage upgrade after 5.1.0
Examples
Basic
Asynchronous loading
With Form
Customize Trigger Token
disabled or readOnly
Placement
autoSize
Status
API
Mention
Mention methods
Option
Design Token

Mentions

  • InputNumberRadio

    Resources

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

    Community

    Awesome Ant Design
    Medium
    Twitter
    yuqueAnt Design in YuQue
    Ant Design in Zhihu
    Experience Cloud Blog
    seeconfSEE Conf-Experience Tech Conference

    Help

    GitHub
    Change Log
    FAQ
    Bug Report
    Issues
    Discussions
    StackOverflow
    SegmentFault

    Ant XTechMore Products

    yuqueYuQue-Document Collaboration Platform
    AntVAntV-Data Visualization
    EggEgg-Enterprise Node.js Framework
    kitchenKitchen-Sketch Toolkit
    xtechAnt Financial Experience Tech
    Theme Editor
    Made with ❤ by
    Ant Group and Ant Design Community

    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

    API

    Common props ref:Common props

    Mention

    PropertyDescriptionTypeDefaultVersion
    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-
    onBlurTrigger when mentions lose focus() => void-
    onChangeTrigger when value changed(text: string) => void-
    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-
    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
    activeBorderColorActive border colorstring#4096ff
    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 itemnumber100
    dropdownHeightHeight of popupnumber250
    errorActiveShadowBox-shadow when active in error statusstring0 0 0 2px rgba(255, 38, 5, 0.06)
    hoverBorderColorHover border colorstring#4096ff
    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.

    expand codeexpand code
    With Form

    Controlled mode, for example, to work with Form.

    expand codeexpand code
    disabled or readOnly

    Configure disabled and readOnly.

    expand codeexpand code
    autoSize

    Height autoSize.

    expand codeexpand code
    Asynchronous loading

    async.

    expand codeexpand code
    Customize Trigger Token

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

    expand codeexpand code
    Placement

    Change the suggestions placement.

    expand codeexpand code
    Status

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

    expand codeexpand code