OTP入力InputOTPExperimental

ワンタイムパスワードや確認コードを、桁ごとのスロットで入力するコンポーネントです。

プレビュー

6桁の確認コードを入力します。

状態とバリエーション

3桁ごとの区切り

視認性を上げるため、3桁ごとに区切りを入れます。

1
2
3

入力値: 123

連続した6桁

短いコードでは、区切りなしで横一列に並べられます。

2
4
6
8

入力値: 2468

無効化

再送信待ちや期限切れでは操作を無効化し、ツールチップで理由を補足します。

1
2
3
4
5
6

確認コードを再送信するまで入力できません。

プロパティ

表は横にスクロールできます
プロパティ型初期値説明
InputOTP.maxLengthnumber-入力できる総桁数です。6桁コードなら 6 を指定します。
InputOTP.valuestring-外部で管理する入力値です。
InputOTP.onChange(value: string) => void-入力値が変わった時に呼ばれる処理です。
InputOTPSlot.indexnumber-0 から始まる入力枠の番号です。必須です。
InputOTPSeparatorReactNode-入力枠のグループ間に表示する区切りです。

使い方

import * as React from "react";
import { InputOTP, InputOTPGroup, InputOTPSlot } from "@gunjo/ui";

export function VerificationCodeField() {
  const [code, setCode] = React.useState("");

  return (
    <InputOTP maxLength={6} value={code} onChange={setCode}>
      <InputOTPGroup>
        {[0, 1, 2, 3, 4, 5].map((index) => (
          <InputOTPSlot key={index} index={index} />
        ))}
      </InputOTPGroup>
    </InputOTP>
  );
}

使用コンポーネント

InputOTPInputOTPGroupInputOTPSlotInputOTPSeparatorTooltipFormGroupFormLabelFormDescription

関連コンポーネント

InputPasswordInputFormNumberInput