OTP入力InputOTPExperimental
ワンタイムパスワードや確認コードを、桁ごとのスロットで入力するコンポーネントです。
プレビュー
状態とバリエーション
3桁ごとの区切り
視認性を上げるため、3桁ごとに区切りを入れます。
連続した6桁
短いコードでは、区切りなしで横一列に並べられます。
無効化
再送信待ちや期限切れでは操作を無効化し、ツールチップで理由を補足します。
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| InputOTP.maxLength | number | - | 入力できる総桁数です。6桁コードなら 6 を指定します。 |
| InputOTP.value | string | - | 外部で管理する入力値です。 |
| InputOTP.onChange | (value: string) => void | - | 入力値が変わった時に呼ばれる処理です。 |
| InputOTPSlot.index | number | - | 0 から始まる入力枠の番号です。必須です。 |
| InputOTPSeparator | ReactNode | - | 入力枠のグループ間に表示する区切りです。 |
使い方
Loading...