Type a trigger character in a text field to pick a person, a tag or a command from a list.
Type @ and the start of a name. Arrow keys move through the list, Enter or Tab inserts the mention and Escape closes the list.
Change the character with trigger. Here # picks a topic.
Keep the text in your state to read who was mentioned. The people below are the ones who will be notified.
| Attribute | Description | Type | Accepted values | Default |
|---|---|---|---|---|
| options | what can be mentioned. value is inserted, label is shown | { value: string; label?: string; disabled?: boolean }[] | - | - |
| trigger | character that opens the list | string | - | @ |
| value | text of the field, to control it | string | - | - |
| initialValue | text at the start | string | - | '' |
| onChange | called with the new text | (text: string) => void | - | - |
| onSelect | called with the option that was inserted | (option: MentionOption) => void | - | - |
| rows | height of the field | number | - | 3 |
| placeholder | hint while the field is empty | string | - | - |
| emptyText | shown when nothing matches | string | - | No results |
| disabled | block the field | boolean | - | false |
| ... | native props of the textarea | TextareaHTMLAttributes | - | - |