提及輸入框
輸入 @ 觸發人員選單，插入高亮提及籤條的文字區。
輸入 @ 即時開啟可鍵盤操作的成員浮動選單，選中後插入彩色高亮的 @名稱 籤條，並透過 onChange 回傳目前文中所有被提及的成員，適合留言、評論與協作工具的輸入場景。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
4
6
<MentionTextarea />
安裝
npx shadcn@latest add https://webberui.com/r/mention-textarea.json或在 components.json 設定 registries 後，改用 @webberui/mention-textarea 安裝。
安裝依賴後，從 registry JSON（/r/mention-textarea.json 的 files[0].content）複製 mention-textarea.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
import {
MentionTextarea,
type MentionUser,
} from "@/components/ui/mention-textarea";
const users: MentionUser[] = [
{ id: "u1", name: "林小美", hue: 340, title: "產品設計師" },
{ id: "u2", name: "陳大文", hue: 210, title: "前端工程師" },
];
<MentionTextarea
users={users}
placeholder="輸入訊息，使用 @ 提及成員…"
onChange={(value, mentions) => console.log(value, mentions)}
/>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
users | MentionUser[] | — | 可被提及的成員清單（{ id, name, hue, title? }），輸入 @ 時據此過濾選單 |
value | string | — | 受控模式的文字值，與 onChange 搭配使用 |
defaultValue | string | "" | 非受控模式的初始文字值 |
onChange | (value: string, mentions: MentionUser[]) => void | — | 內容變更回呼，第二參數為目前文中所有被提及的成員 |
placeholder | string | "輸入訊息，使用 @ 提及成員…" | 輸入框佔位提示文字 |
rows | number | 4 | textarea 顯示行數 |
maxMenuItems | number | 6 | 選單一次最多顯示的成員數 |
className | string | — | 透傳到最外層容器並以 cn() 合併 |
可及性
- 輸入框標註
role="combobox"、aria-expanded、aria-autocomplete="list"，選單為role="listbox"，項目為role="option"並以aria-activedescendant指向當前選項 - 完整鍵盤支援：
↑/↓移動選項、Enter或Tab插入、Escape關閉選單 - 選單項目以
onMouseDown攔截點擊，選取過程中焦點始終留在輸入框內 - 使用者系統開啟「減少動態效果」時，選單改為純淡入淡出、取消選中底塊的 spring 位移動畫
- 高亮層為
aria-hidden的純視覺鏡像，輔助科技仍朗讀 textarea 的原始純文字內容