文字輸入元件
它們都能打字，但使用者要完成的事情不同。
不要看到長方形欄位就叫 Input。先確認要輸入的是短值、長內容、秘密值，還是用文字搜尋既有資料。
選型流程
四個問題，快速定位輸入欄。
- 內容需要多行或換行嗎？是：使用 Textarea。
- 內容不應被旁人看見嗎？是：使用 Password Field。
- 輸入是在縮小既有資料嗎？是：使用 Search Field。
- 以上都不是嗎？多數短文字、代號或格式化資料適合 Text Field。
比較表
欄位外觀接近，回饋責任不同。
點選元件名稱可查看完整介紹、Demo、AI Prompt 與驗收清單。
| 比較面向 | Text Field｜文字輸入欄 | Textarea｜多行文字輸入欄 | Password Field｜密碼輸入欄 | Search Field｜搜尋欄 |
|---|---|---|---|---|
| 使用者目的 | 輸入一個短文字或格式化值 | 輸入多行說明或備註 | 輸入不應被旁人直接看見的秘密值 | 縮小既有資料集 |
| 內容長度 | 短、單行 | 長、多行、可換行 | 通常短到中等、單行 | 通常短、可反覆調整 |
| 核心互動 | 輸入與格式驗證 | 輸入、字數與換行 | 遮蔽、顯示與規則驗證 | 篩選、清除與零結果 |
| 不要拿來做 | 長篇備註、密碼或搜尋 | 單一代號或短答案 | 一般非敏感文字 | 儲存新值或選取受限資料 |
| 最常漏掉的事 | Label 與錯誤文字 | 字數回饋與內容保留 | 顯示／隱藏的可理解名稱 | 結果數量、清除與零結果 |
這組結論
「搜尋成員」不是一個要儲存的文字欄位。
它的責任是縮小既有結果、提供清除和零結果回饋。反過來說，「交接備註」是多行內容，不該硬塞進單行 Text Field。
操作 Search Field Demo →