Mentions

A textarea that opens a suggestion list after a trigger character, for @ mentions and anything else keyed the same way.

Basic

Pass options a list of people, then type @ in the field to pick one and insert their handle into the text.

Sizes

Set size to large or small to match the other fields in your form, with medium as the default.

Variants

Set variant to outlined, filled, text, underlined, borderless or bare, the same six styles Input and Select use. text fills on hover and while focused, and bare draws nothing at all.

Status

Set status to warning or error to color the field's border when its value needs attention.

Multiple prefixes

Pass prefix an array and swap options in onSearch, which receives the typed trigger, so @ lists people and # lists labels.

Load from a server

Fetch options in onSearch, show loading while the request runs, and set filterOption={false} so the results are not filtered again.

Auto height

Set autoSize to grow the field by one row for every line of text, with no upper limit.

Clamped height

Pass autoSize a minRows and maxRows to keep the field between two heights and scroll the text past the limit.

Clear button

Set allowClear to show a button at the end of the field that empties the whole value in one click.

Disabled

Set disabled to gray out the field, which then takes no focus and opens no suggestion list.

Read-only

Set readOnly to keep the text focusable and selectable while blocking edits and the @ list.

Placement

Set placement="top" to open the suggestion list above the field, for inputs that sit near the bottom of the screen.

In a form

Add a Form.Item rule to validate the text, like requiring at least one @ mention before the note can be posted.

classNames

Pass classNames to style one part: textarea for the field and popup for the suggestion list, like a resizable field.

In context

The component inside real screens, with the components it usually sits beside.

Comment composer

A discussion card whose composer posts comments and tags each one with the people it mentions.

API Reference

Mentions
Mentions's props. Rows marked antuikit in the Version column are added by the kit.
Option
Option's props.