Mention inputPro
A textarea that suggests people as you type @ and inserts their handle.
Type @ to mention someone · ⌘ + Enter to post
When to use
- Comments, chat and task descriptions where people tag teammates.
When not to use
- Rich text editing with formatting: use an editor.
Installation
Usage
Import it from @/components/ui/mention-input after installing.
example.tsx
import { MentionInput } from "@/components/ui/mention-input";
<MentionInput users={members} onSubmit={(text) => postComment(text)} />API reference
MentionInput
A textarea with an @-triggered people list. Inserts @handle followed by a space.
| Prop | Type | Default | Description |
|---|---|---|---|
| users | { id; name; handle; hue? }[] | – | People to suggest; matched on name and handle. |
| value / defaultValue / onValueChange | string | – | Controlled or uncontrolled text. |
| onSubmit | (value) => void | – | Called on ⌘/Ctrl+Enter. |
| placeholder / rows | string / number | — / 3 | Textarea options. |
Keyboard interactions
| Keys | Action |
|---|---|
| @ | Start a mention |
| ↑or↓ | Move through people |
| EnterorTab | Insert the highlighted person |
| Esc | Close the list |
| ⌘EnterorCtrl+Enter | Submit |
Accessibility
- The textarea is a combobox controlling a listbox with aria-activedescendant.
- Focus never leaves the textarea while picking.
Motion
- The list springs in under the field; the highlight glides between people.
Responsive behavior
- Fills its container; the list is 256px wide.
Performance
- Shows at most six matches; filtering is a substring match.
Notes for AI
- Parse mentions on the server with /@([\\w.-]+)/ and map handles to user ids.
This page as Markdown, for assistants and coding agents:
/components/mention-input/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt