Mention Textarea
A textarea where typing @ opens a people menu and inserts a highlighted mention chip.
This is a WebberUI Pro component
Free during the launch campaign: sign up or sign in, then hit “Copy install command” in the preview above and it installs straight away — no payment, no credit card. The command below returns 401 while you are signed out.
Typing @ instantly opens a keyboard-operable floating member menu; picking someone inserts a colour-highlighted @name chip, and onChange reports every member currently mentioned in the text — a good fit for comments, replies, and collaboration tools.
npx shadcn@latest add "https://webberui.com/r/mention-textarea.json?t=<install token>"Playground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
<MentionTextarea />
Installation
npx shadcn@latest add "https://webberui.com/r/mention-textarea.json?t=<install token>"Or, once registries are configured in components.json, install it as @webberui/mention-textarea.
Usage
import {
MentionTextarea,
type MentionUser,
} from "@/components/ui/mention-textarea";
const users: MentionUser[] = [
{ id: "u1", name: "Lin Xiaomei", hue: 340, title: "Product Designer" },
{ id: "u2", name: "Chen Dawen", hue: 210, title: "Frontend Engineer" },
];
<MentionTextarea
users={users}
placeholder="Type a message, use @ to mention someone…"
onChange={(value, mentions) => console.log(value, mentions)}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
users | MentionUser[] | — | The list of mentionable members ({ id, name, hue, title? }), used to filter the menu when @ is typed |
value | string | — | Text value in controlled mode, used together with onChange |
defaultValue | string | "" | Initial text value in uncontrolled mode |
onChange | (value: string, mentions: MentionUser[]) => void | — | Callback for content changes; the second argument is every member currently mentioned in the text |
placeholder | string | "輸入訊息，使用 @ 提及成員…" | Placeholder hint text of the input |
rows | number | 4 | Number of rows the textarea shows |
maxMenuItems | number | 6 | Maximum number of members the menu shows at once |
className | string | — | Forwarded to the outermost container and merged with cn() |
Accessibility
- The input is marked
role="combobox",aria-expanded,aria-autocomplete="list", the menu isrole="listbox", and items arerole="option"witharia-activedescendantpointing at the current option - Full keyboard support:
↑/↓move between options,EnterorTabinserts,Escapecloses the menu - Menu items intercept the click with
onMouseDown, so focus stays in the input throughout the selection - When the user has "reduce motion" enabled at the system level, the menu becomes a plain fade in / fade out and the spring displacement of the selection block is turned off
- The highlight layer is an
aria-hiddenpurely visual mirror; assistive technology still reads the textarea's original plain text content