OTP Field
アクセシブルな 1 つの input でワンタイムコードを受け取り、分割されたビジュアルサーフェスとして表示します。
主なプロパティ
| プロパティ | 動作 |
|---|---|
| value | defaultValue で非制御、value と onValueChange で制御状態として動作 |
| input | 入力、コード全体の貼り付け、削除、フォーカス移動、1 つのネイティブフォーム値をサポート |
| autocomplete | 最初のスロットは既定で one-time-code となり、パスワードマネージャーとプラットフォームの自動入力に対応 |
| length | 値を制限し、完了と妥当性を決定する。同じ数の Input パーツを明示的にレンダリングする必要がある |
| layout | compact はトークンサイズの正方形スロットを維持し、stretch は利用可能な横幅を均等な正方形スロットで埋めます |
インストール
pnpm add @tinyrack/ui長い行はコード領域を横にスクロールして確認できます。
スタイル
@import '@tinyrack/ui/components/otp-field.css';長い行はコード領域を横にスクロールして確認できます。
インポート
import { TROTPField } from '@tinyrack/ui/components/otp-field';長い行はコード領域を横にスクロールして確認できます。
プレイグラウンド
使用方法
例
サイズ パーマリンク
uiSize を指定して OTP スロットの高さを隣の Input、Button、NumberField と揃えます。
横幅いっぱいの正方形スロット パーマリンク
分割入力をフォームの横幅に揃えるには layout="stretch" を選択してください。各スロットが同じ幅を取り、正方形の比率を維持します。
貼り付け、完了、拒否された文字 パーマリンク
4 桁の code を貼り付けるか文字を入力し、accepted、completed、rejected の event reason を確認します。
API
TROTPField.Root、TROTPField.Input、TROTPField.Separator namespace member を使います。同じ subpath は prefix 付きの TROTPFieldRoot、TROTPFieldInput、TROTPFieldSeparator binding と prop/state type も export しますが、bare の Root、TRInput、TRSeparator binding は export しません。
| パーツ | 主な props |
|---|---|
Root | length, value, defaultValue, onValueChange, onValueComplete, onValueInvalid, validationType, normalizeValue, autoComplete, inputMode, mask, name, form, required, disabled, readOnly, autoSubmit, uiSize, layout, ref, render |
Input | ネイティブ input props、className、style、ref、Base UI の render |
Separator | orientation（既定値は vertical）、TRSeparator props、ref |
Root はラベル付きの role="group" をレンダリングします。表示ラベルを用意し、aria-labelledby で関連付けてください。スロット ID はルートの id から派生し、最初のスロットには既定で one-time-code 自動入力が適用されます。既定の compact レイアウトでは、uiSize?: 'md' | 'lg'（既定値 md）ですべてのスロットとセパレーターの高さを一括で調整できます。stretch レイアウトでは、ルートで利用できる横幅から各正方形スロットのサイズを決定します。値イベントの details.reason で入力、削除、貼り付け、キーボード変更を区別できます。無効なフィールドはフォームデータから除外され、読み取り専用フィールドは値を送信します。