OTP入力

1桁ずつ入力する6つの欄を持つ、ワンタイムコードの入力です。見た目は6つの入力欄ですが、値は1つとして扱います。入力すると次へ進み、Backspaceで前へ戻り、矢印キーは値を変えずに移動します。貼り付けや自動入力のコードは、各欄に分配されます。

インストール

この OTP 入力を CLI または手動で追加できます。

ダークモード対応：このコンポーネントはBoardUIのセマンティックトークンに合わせて自動で切り替わります。テーマスイッチの設定.

CLI

手動

CLIがコンポーネントのソースと内部の依存ファイルをプロジェクトにコピーし、必要なnpmパッケージをインストールします。

npx boardui@latest add input-otp

共有UIパッケージや独自のインポートエイリアスを使う場合は、インストールパスの設定をCLIの実行前に設定してください。コピー＆ペーストの例は、標準のインポートを使います。

制御値

値は、文字の配列ではなく、単一の文字列です。パス 値 + onChange それを制御するために、または defaultValue コントロールされていないままにしてください。 onComplete 最後のボックスが埋め込まれる瞬間を発射します。これは通常、あなたが提出する場所です。

const [code, setCode] = useState("");
<InputOtp  value={code}  onChange={setCode}  onComplete={(value) => verify(value)}  aria-label="Verification code"/>

長さ、グループ化および状態

length 箱の数を置き、 groupEvery それらを実行に分割し、長いコードが読みやすくなります。 isInvalid 箱に同じ錫の上の赤い端を失敗させます 入力 使用。

{/* Four boxes instead of six */}<InputOtp length={4} aria-label="PIN" />
{/* Split into groups: 000 000 */}<InputOtp groupEvery={3} aria-label="Verification code" />
{/* States */}<InputOtp isInvalid aria-label="Verification code" /><InputOtp isDisabled defaultValue="1234" aria-label="Verification code" />

ペーストとオートフィル

すべてのボックスに貼り付けると、すべての文字をドロップするのではなく、その点から数字を配布します。同じパスは、OSオートフィルを処理します。iOSとChromeは、すべてのコードを単一のボックスに渡します。 autoComplete="one-time-code" 複数の文字を受け付けます。非数字は全体にストライプされ、箱は使用します inputMode="numeric" そのため、携帯電話は、スピナーやストレイ文字を使わずにナンバーパッドを表示します number 入力は持って来ます。