輸入 OTP

InputOtp 組件允許使用者輸入一次性密碼 (OTP)。它基於 input-otp 函式庫，由 @guilherme_rodz 開發。

安裝

上面的命令僅適用於單獨安裝。如果已全域安裝，則可以跳過此步驟 @nextui-org/react 。

導入

用法

已停用

isDisabled 屬性會停用使用者與 InputOtp 元件的互動。

唯讀

isReadOnly 屬性會使 InputOtp 元件成為唯讀，同時保持其視覺外觀。

必填

isRequired 屬性會將 InputOtp 標記為必填欄位。

尺寸

可以使用 size 屬性來自訂 InputOtp 的尺寸。預設值為 md。

顏色

可以通過 color 屬性變更 InputOtp 的顏色。

變體

可以通過 variant 屬性變更 InputOtp 的樣式/變體。預設情況下，variant 屬性設定為 flat。

圓角半徑

InputOtp 的圓角半徑可以透過 radius 屬性來更改。預設情況下，radius 屬性設定為 md。

密碼

透過將 type 設定為 password，InputOtp 可以用作密碼/安全 PIN 輸入。

描述

InputOtp 的描述可以透過 description 屬性設定。

錯誤訊息

InputOtp 的自訂錯誤訊息可以透過 errorMessage 屬性設定。

允許的按鍵

• InputOtp 元件僅接受指定的輸入按鍵。任何其他輸入都會被忽略。
• 您可以使用 allowedKeys 屬性自訂允許的按鍵，該屬性接受一個正規表示式模式。
• 預設情況下，allowedKeys 設定為 ^[0-9]*$（僅限數字）。

受控元件

React Hook Form

您可以將 InputOtp 與 React Hook Form 一起使用，以進行表單驗證和提交處理。

不同長度和驗證

InputOtp 元件透過 length 屬性支援不同的長度。您可以透過將數字值傳遞給 length 屬性來設定輸入區段的數量。常見的使用情況包括 4 位數 PIN 碼和 6 位數驗證碼。

自訂樣式

您可以使用 classNames 屬性自訂 InputOtp 元件的樣式。

插槽

• base：InputOtp 包裝器，它處理對齊、放置和一般外觀。
• wrapper：包裝底層的 input-otp 元件。作為 containerClassName 屬性傳送到底層的 input-otp 元件。
• input：輸入元素。
• segmentWrapper：包裝所有區段元素。
• segment：區段元素。
• caret：插入符號代表 input-otp 元件的輸入指示器。
• passwordChar：passwordChar 代表輸入類型為 password 時的文字樣式。
• helperWrapper：包裝 description 和 errorMessage。
• description：input-otp 的描述。
• errorMessage：input-otp 的錯誤訊息。

資料屬性

InputOtp 在 base 元素上具有以下屬性：

• data-invalid：當 input-otp 無效時。基於 isInvalid prop。
• data-required：當 input-otp 為必填時。基於 isRequired prop。
• data-readonly：當 input-otp 為唯讀時。基於 isReadOnly prop。
• data-filled：當 input-otp 完全填滿時。
• data-disabled：當 input-otp 被禁用時。基於 isDisabled prop。

InputOtp 在 segment 元素上也具有以下屬性：

• data-active：當區段為活動狀態時。
• data-focus：當區段獲得焦點時。
• data-focus-visible：當區段獲得可見焦點時。
• data-has-value：當區段有值時。

無障礙性

• 基於 input-otp 建構。
• 必填和無效狀態透過 ARIA 暴露給輔助技術。
• 支援透過 ARIA 連結到 input-otp 的描述和錯誤訊息輔助文字。
• 鍵盤導航
  • Tab 鍵：在輸入區段之間移動焦點
  • 方向鍵：在區段之間導航
  • Backspace 鍵：清除當前區段並將焦點移動到前一個區段
• ARIA 屬性
  • aria-invalid：表示驗證狀態
  • aria-required：表示輸入是否為必填

API

InputOtp Props

InputOtp Events