60 秒決策
先確認使用者要完成的事。
適合使用
- 使用者要輸入數個短且可獨立管理的關鍵字、收件人或分類。
- 每個值都需要新增、移除、去重、上限或格式驗證。
不適合使用
- 值只能從既有資料挑選，應使用 Multi-select 或 Combobox。
- 只需要一個沒有結構的長文字欄位。
畫面要說清楚的事
不要只交代外觀，也要交代資料與輸入規則。
新增規則必須看得見
告訴人按 Enter 或逗號新增、最多幾個，以及空白與重複值怎麼處理。
每個標籤都可理解地移除
移除按鈕的 accessible name 要包含標籤文字，不能只留一個孤立的叉叉。
不要假裝是多選
Tag Input 可建立新值；若只能選既有值，請選 Multi-select。
必要狀態與回應
每個狀態都要讓使用者知道下一步。
空白
說明如何新增與最多可加入的數量。
已加入標籤
每個值顯示成可辨識的項目，並可單獨移除。
重複或到達上限
不悄悄忽略輸入，說明哪一條規則阻止了新增。
可再輸入
移除標籤後，重新開放空間與輸入焦點。
操作 Demo
先知道要觀察什麼，再動手操作。
操作前先知道
文章標籤
先觀察：新增、去重、移除與上限訊息是否都在同一個清楚的流程中。
操作：輸入標籤後按 Enter，再嘗試加入重複值或點擊移除。
預期結果：有效標籤加入清單；重複與上限有文字回饋；移除後可繼續新增。
可操作 Demo
新增與移除多個標籤
告訴 AI
把任務、規則、狀態與操作條件一次寫清楚。
建立「文章標籤」Tag Input。使用者輸入後按 Enter 或逗號即可新增標籤，已選標籤顯示可理解的移除按鈕；最多 5 個，不能加入空白或重複標籤。欄位附近持續顯示目前數量與規則，並保留文字輸入作為新增入口。驗收清單
不要只確認欄位能不能點。
- 是否說明新增按鍵與上限？
- 空白與重複值是否有可理解結果？
- 每個移除按鈕是否帶有標籤名稱？
- 是否能用鍵盤完成新增與移除？
- 若只選既有值，是否改用 Multi-select？