InputOTP

メール・SMS で送られる認証コードを入力するフィールド。6桁の数字を1文字ずつ入力させる専用UIで、コピー＆ペーストにも対応。

インストール

npx shoji add input-otp

プレビュー

認証コードを入力してください

Lengths

4桁（PIN）

6桁（メール・SMS 認証）

使い方

こんなときに使う

  • 2段階認証・SMS認証・メール認証コードの入力
  • セキュリティが重要な操作前の本人確認

使わないほうがいい場面

  • 認証コード以外の用途（通常の数字入力は type="number" の Input を使う）

JP 最適化のポイント

  • 各セルを h-11（44px）以上に設定 — スマートフォンでの数字入力時にタップしやすい
  • 数字専用キーボード（inputMode="numeric"）を指定 — Android・iOS でテンキーが自動的に表示される