Text Field 文字輸入框
概述
文字輸入框是一種用於收集使用者輸入文字資訊的元件，允許使用者在指定區域內輸入、編輯和刪除文字。
使用時機
文字輸入框常用於以下情境：
- 表單填寫：在各種表單中蒐集使用者資訊，例如註冊表單、聯絡表單、訂單、問卷等。
- 搜尋功能：讓使用者輸入關鍵字來搜尋網站或應用程式中的內容。
- 訊息傳遞：讓使用者輸入訊息內容，與其他人進行溝通，例如即時通訊軟體對話框、線上客服聯絡欄。
- 內容創作和編輯：讓使用者輸入和編輯文字內容，例如文章、筆記、程式碼等。
使用規範
當您取用文字輸入框進行設計時，應考慮以下原則：
- 輸入提示（選擇性）：在輸入欄位內顯示的提示文字（Placeholder），引導使用者輸入正確的資訊。
- 輸入限制（選擇性）：根據需要設置輸入限制，如最大字數、允許的字元類型等。
- 錯誤提示：當使用者輸入不符合要求的資訊時，提供明確的錯誤提示。
設計範例
單行文字輸入框 (Text Input)
適用於短篇文字輸入，如姓名、電子郵件、密碼等。
![]()
- 標籤（Label）（選擇性）：位於單行文字輸入框上方，說明需要輸入的內容。
- 提示文字（Placeholder）：位於輸入框內，在使用者輸入前提供引導。
- 輸入框（Text Input）：供使用者輸入文字的區域。
- 幫助文字（Supporting Text）（選擇性）：位於輸入框下方，顯示系統訊息。
- 前置圖標（Leading Icon）（選擇性）：在輸入框左側顯示的圖標。
- 後置圖標（Trailing Icon）（選擇性）：在輸入框右側顯示的圖標。
多行文字輸入框 (Text Area)
適用於長篇文字輸入，如評論、留言、文章等。
![]()
- 標籤（Label）（選擇性）：位於多行文字輸入框上方，說明需要輸入的內容。
- 提示文字（Placeholder）：位於輸入框內，在使用者輸入前提供引導。
- 輸入框（Text Input）：供使用者輸入多行文字的區域。
- 幫助文字（Supporting Text）（選擇性）：位於輸入框下方，顯示系統訊息。
- 字數計算器（Counter）（選擇性）：顯示當前輸入字數及允許輸入的總字數。
