コンポーネント一覧へ戻る

OTP 桁入力 React コンポーネント

これは何か

6つの箱に確認コードを入れる入力欄です。入力すると次の箱へ進み、Backspace で戻り、コードを貼り付けると全部の箱が一度に埋まります。次に入れる箱ではキャレットが点滅し、全桁そろうと枠が緑に変わります。桁数とラベルを差し替えて、ログインや2段階認証、メール確認の画面にそのまま置けます。

ほかのコンポーネント

一覧を見る →

コマンド K ヒント

タグ入力ロウ

API キーフィールド

招待メールフィールド

ハンドル空き確認フィールド

コンポーネント

OTP 桁入力

6つの箱に確認コードを入れる入力欄です。入力すると次の箱へ進み、Backspace で戻り、コードを貼り付けると全部の箱が一度に埋まります。次に入れる箱ではキャレットが点滅し、全桁そろうと枠が緑に変わります。桁数とラベルを差し替えて、ログインや2段階認証、メール確認の画面にそのまま置けます。

確認しています…

ライブプレビュー

Verified Technical Spec

アニメーション: CSS / Tailwind
Reduced motion: 確認済み
キーボードフォーカス: 確認済み
対応環境: Tailwind CSS v3.4 + v4 · React 19 / Next.js 15 App Router + Vite / Remix 対応

含まれるもの

ソースを Cursor / Claude に渡してエージェントに組み込める
React · TypeScript · Tailwind CSS の完成 UI

依存パッケージ

React 19.0.0
Typescript 5.7.2
Tailwindcss 3.4.16

技術スタック

React
TypeScript
Tailwind CSS

バージョン 1.0.0