跳至主要内容
💬 回報這一頁

NumberInput 數值輸入

輸入數字。看起來只是 type="number"，但有三件小事漏了就會被罵。

在 Storybook 開啟

三件小事​

  1. inputMode="numeric" —— 手機直接跳數字鍵盤，不必切輸入法
  2. tabular-nums —— 等寬數字，上下對齊才看得出位數
  3. 右對齊 —— 數字靠右才好比大小

底色套 .field-editable，與其他可編輯欄位長相一致。

數值輸入

何時不要用​

✅ 這樣做

數量、金額、比率這類會被拿去計算的值。

🚫 不要這樣

不要用在「看起來是數字但其實是代碼」的欄位（編號、統一編號、電話）。 那些是字串：type="number" 會吃掉前導零、允許 e 與負號、 而且滑鼠滾輪會意外改值。

滾輪改值是個陷阱​

type="number" 在聚焦狀態下滾動頁面會改掉值，而使用者完全不會發現。 在長表單裡建議由宿主加 onWheel={(e) => e.currentTarget.blur()}。

取用​

npx shadcn@latest add https://kielchang.github.io/dooping-design-book/r/number-input.json