Input 輸入框

單行或多行的文字輸入。使用 Element Plus 的 el-input,本頁定義 Accuhit 產品中的使用準則。

設計準則

• 欄位標籤放在輸入框外面,placeholder 只放提示或範例;不可拿 placeholder 當標籤(一輸入提示就消失,使用者會忘記在填什麼)
• placeholder 寫「請輸入○○」或直接給範例(如 name@example.com)
• 尺寸跟著情境走:後台表單用預設,表格行內編輯、工具列用 small,登入頁、行銷頁的大欄位可用 large;同一張表單內不混用
• 輸入框寬度暗示預期內容長度:電話、數量這類短內容不要給滿版
• 圖標一律用 Font Awesome,放 prefix / suffix(見圖標規範)
• 多行輸入用 type="textarea",預設 3 列起

不使用的變體

Element Plus 文件裡有,但 Accuhit 產品不使用的變體:

• type="number" 的原生數字框:要微調的數字用 InputNumber,電話這類數字字串用一般文字框 + 驗證;原生 number 的滾輪誤觸和樣式問題多

基本用法

loading

尺寸

三種尺寸對應三種場景;同一張表單只用一種:

loading

禁用

用於「規則上不可改」的欄位(系統產生、無編輯權限),並在旁邊說明原因。 如果只是純展示資訊(詳情頁),直接用文字呈現,不要放一顆禁用的輸入框:

loading

一鍵清空

搜尋、篩選類輸入框必加 clearable,讓使用者一鍵重來;一般表單欄位不需要:

loading

密碼框

用內建的 show-password 提供「看一眼」功能,不要自己做明碼切換; 註冊時的強度提示、規則說明放在欄位下方:

loading

有圖示的輸入框(自訂圖標)

圖標是輔助辨識,不取代欄位標籤。一律用 Font Awesome 放進 prefix / suffix slot (不用 EP 的 prefix-icon prop,那要搭配 EP 內建圖標):

loading

格式化(formatter / parser)

用於「顯示格式 ≠ 儲存格式」的欄位,典型是金額千分位:畫面上顯示 1,200,000,實際儲存 1200000。 設計稿標註顯示格式即可,轉換規則要和工程師確認:

loading

複合型輸入框

把固定不變的部分(協定、網域後綴)或輸入後立即執行的動作(搜尋鈕)做成輸入框的一部分, 使用者少打字、也少一次視線移動:

loading

長度限制

有字數上限時用 maxlength + show-word-limit 即時顯示,不要等送出才報錯:

loading

多行文字

備註、描述類欄位,搭配字數上限與即時計數:

loading

Do / Don't

✅ Do	❌ Don't
標籤在框外 + placeholder 提示範例	拿 placeholder 當欄位標籤
搜尋框加 clearable	讓使用者自己全選刪除
maxlength + show-word-limit 即時提示	送出後才報「字數過長」
寬度符合預期內容長度	每個欄位都拉滿版
同一張表單尺寸一致	混用 large / small 欄位
詳情頁純展示用文字	一整頁禁用的輸入框
密碼用內建 show-password	自刻明碼切換

給工程師

完整 API(props/events/slots)見 Element Plus Input 文件。 本站規範優先於 EP 文件中的視覺建議。