InputOtp 一次性密碼框

輸入簡訊或 Email 驗證碼的專用元件。使用 Element Plus 的 el-input-otp。

設計準則

• 只用於驗證碼(OTP)情境;一般密碼欄位用 el-input 的 show-password
• length 必須和實際發送的驗證碼位數一致(常見 6 碼)
• 下方要有「重新發送」連結與倒數秒數,避免使用者收不到碼卡住
• 輸滿後自動觸發驗證,不要再要求按一次確認
• 驗證失敗時清空內容並聚焦第一格,搭配明確錯誤訊息

基本用法

loading

尺寸

驗證頁通常以 OTP 為主角,用預設或 large;嵌在表單、彈窗裡用預設。同一畫面只用一種:

loading

禁用

送出驗證、等待回應時鎖定輸入,避免使用者重複修改;鎖定時要有狀態文字說明在等什麼:

loading

展示類型

三種外觀:outlined(預設)、filled、underlined。 後台產品一律用預設 outlined;filled / underlined 只在登入頁、行銷頁需要配合整頁視覺時使用,且同一產品只選一種:

loading

密碼模式

驗證碼預設明碼——使用者要對照簡訊逐字輸入,遮住反而容易打錯。 只有交易 PIN 這類「長期祕密、旁人不可見」的碼才開 mask:

loading

分隔符

分隔符有三種寫法:固定字串(每格之間都放)、函式(依位置決定,可做分組)、slot(自訂內容)。 設計上的建議:分隔符是輔助分組用的,和簡訊裡驗證碼的分組一致(如 3-3)最好;不分組就不要加,滿版斜線只是視覺噪音:

loading

Do / Don't

✅ Do	❌ Don't
6 碼驗證碼、輸滿自動驗證	輸完還要再按「確認」
附「重新發送」+ 倒數	收不到碼沒有任何出路
失敗清空並聚焦第一格	失敗後保留錯的碼讓使用者自己刪
只用於驗證碼	拿來當一般密碼輸入
驗證碼明碼顯示	簡訊驗證碼也開 mask
後台一律 outlined	同產品混用三種展示類型

給工程師

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