InputOtp

InputOtp は、タブでコンテンツのコレクションをグループ化します。

インポート#


import { InputOtp } from 'primereact/inputotp';
         

基本#

文字数はlengthプロパティで定義され、デフォルトでは4に設定されています。


<InputOtp value={token} onChange={(e) => setTokens(e.value)}/>
         

マスク#

maskオプションを有効にすると、入力フィールドの値が非表示になります。


<InputOtp value={token} onChange={(e) => setTokens(e.value)} mask/>
         

整数のみ#

integerOnlyが存在する場合、入力として整数のみを受け入れることができます。


<InputOtp value={token} onChange={(e) => setTokens(e.value)} integerOnly/>
         

テンプレート#

提供されたイベントと属性にバインドされた独自のUI要素を使用してテンプレートを定義し、デフォルトのデザインを置き換えます。


<InputOtp value={token} onChange={(e) => setTokens(e.value)} inputTemplate={customInput}/>
         

サンプル#

テンプレートと追加要素を使用したサンプルUI実装。

アカウントの認証

お電話に送信されたコードを入力してください。


<div className="flex flex-column align-items-center">
    <p className="font-bold text-xl mb-2">Authenticate Your Account</p>
    <p className="text-color-secondary block mb-5">Please enter the code sent to your phone.</p>
    <InputOtp value={token} onChange={(e) => setTokens(e.value)} length={6} inputTemplate={customInput} style={{gap: 0}}/>
    <div className="flex justify-content-between mt-5 align-self-stretch">
        <Button label="Resend Code" link className="p-0"></Button>
        <Button label="Submit Code"></Button>
    </div>
</div>
         

アクセシビリティ#

スクリーンリーダー

Input OTPは一連のInputTextコンポーネントを使用します。スクリーンリーダーのサポートの詳細については、InputTextコンポーネントを参照してください。

キーボードサポート

キー機能
tab入力otpにフォーカスを移動します。
右矢印フォーカスを次の入力要素に移動します。
左矢印フォーカスを前の入力要素に移動します。
バックスペース入力を削除し、フォーカスを前の入力要素に移動します。
                PrimeReact 10.8.3 by PrimeTek