進階輸入元件
複雜輸入不是更厲害；要先證明它值得。
OTP、Tag Input、Color Picker 與兩種 Editor 看起來都很有「產品感」，但它們各自解決的是不同問題。任務沒有換到足夠價值時，複雜元件只會替使用者多加一道關卡。
先問任務
先找出資料的形狀，再決定要不要加上複雜互動。
- 是一組固定長度的短代碼嗎？才使用 OTP／PIN Input；貼上、修正與錯誤處理比漂亮格子重要。
- 需要建立多個短值嗎？使用 Tag Input；若只能選既有資料，改用 Multi-select 或 Combobox。
- 顏色本身要被儲存或交接嗎？使用 Color Picker，並讓色票和可驗證的 HEX 值一起出現。
- 真的需要由使用者控制內容格式嗎？非技術使用者偏向 Rich Text Editor；需要純文字與版本控制時才選 Markdown Editor。
比較表
五種元件的價值，不在於視覺複雜，而在於少掉哪一種猜測。
點選元件名稱可查看完整介紹、可操作 Demo、AI Prompt 與驗收清單。
| 比較面向 | OTP / PIN Input｜一次性密碼輸入欄 | Tag Input｜標籤輸入欄 | Color Picker｜顏色選擇器 | Rich Text Editor｜富文字編輯器 | Markdown Editor｜Markdown 編輯器 |
|---|---|---|---|---|---|
| 先回答的問題 | 我是否收到了正確的短代碼？ | 要加入哪些可獨立管理的關鍵字？ | 顏色本身要儲存或套用嗎？ | 非技術使用者需要哪些格式？ | 撰寫者需要純文字來源與預覽嗎？ |
| 輸入資料的形狀 | 固定長度、通常只有數字的一組值 | 多個短值，可新增也可移除 | 色票加上可驗證的色碼 | 有格式的內容草稿 | Markdown 純文字與渲染結果 |
| 最需要的互動 | 貼上整組代碼、修正單一碼、重新取得 | Enter 或逗號新增、移除、去重與上限 | 色票即時預覽、色碼貼上與驗證 | 選取內容後套用少量格式 | 來源輸入與安全預覽同步 |
| 常見過度設計 | 輸入完成就自動送出，或強迫逐格輸入 | 明明只能選既有值，卻讓人任意建立 | 為一個預設顏色做巨大自訂色盤 | 把公告欄塞滿字型、表格與十幾個工具 | 對不熟標記的使用者強迫使用語法 |
| 較簡單的替代方案 | 單一 Text Field 加上 one-time-code 提示 | Multi-select 或 Combobox | 有限的預設色彩選項 | Textarea 或固定格式欄位 | Rich Text Editor 或普通 Textarea |
這組結論
先用最小輸入完成任務，再為真正的摩擦加上專用元件。
固定短代碼需要貼上與修正；多個可建立的值需要標籤管理；顏色需要可交接的色碼。只有內容格式本身是任務成果時，才值得引入 Editor，並且先把工具列縮到最小。
操作 OTP Input Demo →