InputNumber 數字輸入框

只允許輸入數字、且常需要微調的欄位:數量、金額、百分比。使用 Element Plus 的 el-input-number。

設計準則

• 只有「必須是數字、而且會上下微調」時才用;電話、身分證這類「數字字串」用一般 el-input
• 一律設定 min / max,不要讓使用者輸入到不合理的值(例如 -1 個名額)
• 小數用 precision 固定位數;步進 step 對齊業務單位(金額 0.5、百分比 5)
• 表單內建議用 controls-position="right":較省寬度,外觀也和其他輸入框一致
• 單位(元、%、天)用 prefix / suffix 放在框內,或放在輸入框旁邊的文字;不要讓使用者把單位打進數字裡

不使用的變體

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

• 隱藏控制鈕(:controls="false"):沒有加減鈕就失去這個元件的意義,外觀又和一般輸入框幾乎相同;不需要微調就改用 el-input + 格式驗證
• 尺寸(size):一律預設尺寸,理由同其他表單元件

基本用法

預設左右加減鈕,適合數量這類小範圍調整:

loading

表單內建議樣式

控制鈕靠右 + 固定小數位數:

loading

禁用

用於「規則上不可改」的數值(由方案、權限決定),並在旁邊說明原因與解法:

loading

前綴與後綴

單位用 prefix(貨幣符號)或 suffix(%、天)放在框內,單位只是顯示、不會混進數值:

loading

Do / Don't

✅ Do	❌ Don't
數量、金額、百分比	電話、身分證號(用 el-input)
設定 min / max	允許輸入 -1 個名額
單位用 prefix / suffix 或旁邊文字	讓使用者把單位打進數字
表單內用 controls-position="right"	同一表單兩種控制鈕樣式混用
保留控制鈕、預設尺寸	:controls="false" 的裸數字框

給工程師

完整 API 見 Element Plus InputNumber 文件。 本站規範優先於 EP 文件中的視覺建議。