# Mentions

- Page: https://jiguang132.com/resources/arco-design/docs/mentions
- Resource: Arco Design (https://jiguang132.com/resources/arco-design.md)
- All guides: https://jiguang132.com/resources/arco-design/docs.md

Mentions is used to mention someone or something in the input.

## Install

```bash
npm install @arco-design/web-react@2.66.18
```

Import `@arco-design/web-react/dist/css/arco.css` at the entry and set the locale with `ConfigProvider`. React 19 projects must also import `@arco-design/web-react/es/_util/react-19-adapter` first, or imperative APIs such as Message and Modal cannot render.

## Examples

- **Basic**: Used to mention someone or something, often used for posting, chatting or commenting.
- **Custom Trigger Word**: Specify `prefix` to customize the trigger character. The default is `@`, which can be customized to any character.
- **Controlled**: An example that `Mentions` is used with `Form`,
- **Disabled & ReadOnly**: Set whether to be disabled via `disabled`, and set whether to be readonly via `readOnly` property.

Examples come from the official Arco Design repository (MIT) at the commit published as npm 2.66.18. Some use online images or upload endpoints; network requests are disabled in previews.

## API

### Mentions

|Property|Description|Type|DefaultValue|Version|
|---|---|---|---|---|
|alignTextarea|Whether the popup is aligned with the input|boolean |`true`|-|
|allowClear|Whether allow clear the content|boolean |`-`|2.2.0|
|disabled|Whether the textarea is disabled|boolean |`-`|-|
|error|Whether the textarea is error.(Deprecated, removed in the next major version, use status='error' instead)|boolean |`-`|-|
|defaultValue|To set default value|string |`-`|-|
|placeholder|textarea placeholder|string |`-`|-|
|split|Set split string before and after selected mention|string |`-`|-|
|value|To set value|string |`-`|-|
|position|Position of dropdown|'top' \| 'tl' \| 'tr' \| 'bottom' \| 'bl' \| 'br' |`bl`|-|
|status|Status|'error' \| 'warning' |`-`|2.45.0|
|clearIcon|Configure the icon of the clear button when `allowClear`.|ReactNode |`-`|2.50.0|
|notFoundContent|The content displayed when there is no data|ReactNode |`-`|-|
|autoSize|Height autoSize feature|boolean \| { minRows?: number; maxRows?: number } |`-`|-|
|className|Additional css class|string \| string[] |`-`|-|
|options|Options of dropdown|(\| string\| number\| { label: ReactNode \| string; value: string \| number; disabled?: boolean })[] |`-`|-|
|prefix|Set trigger prefix keyword|string \| string[] |``@``|-|
|style|Additional style|CSSProperties |`-`|-|
|triggerProps|All `Trigger` component props|Partial<[TriggerProps](trigger#trigger)> |`-`|-|
|wrapperStyle|With `showWordLimit`, a `div` will be outside the `textarea` tag, and `wrapperStyle` is used to configure the style of it.|CSSProperties |`-`|-|
|filterOption|Customize filter option logic|false \| ((inputValue: string, option) => boolean) |`-`|-|
|getPopupContainer|Set the mount HTML node for suggestions|(node: HTMLElement) => HTMLElement |`-`|-|
|onBlur|Trigger when mentions lose focus|(e) => void |`-`|-|
|onChange|Callback when input value is changed|(value: string) => void |`-`|-|
|onClear|Callback when click clear button|() => void |`-`|2.2.0|
|onFocus|Trigger when mentions get focus|(e) => void |`-`|-|
|onPressEnter|Callback when press enter key|(e) => void |`-`|-|
|onSearch|Callback on search|(text: string, prefix: string) => void |`-`|-|

---

Index of all JGuang resources: https://jiguang132.com/llms.txt