§04-04Auth
OTP (SMS/email)
SMS やメールで届いた 6 桁コードを入力させる。
ログインや重要操作の前に本人確認を挟む。パスワードだけでは不安な場面や、二要素認証の導入時に使う。
実装のポイント
1 桁ずつの入力欄は自動フォーカス移動と Backspace での戻りを実装し、貼り付けで 6 桁を分配する。autocomplete=「one-time-code」で SMS の自動入力に対応する。
- 特徴
- フォーム
- キーボード操作
- デモで使っているもの
- shadcn/ui
§04-04Auth
SMS やメールで届いた 6 桁コードを入力させる。
ログインや重要操作の前に本人確認を挟む。パスワードだけでは不安な場面や、二要素認証の導入時に使う。
1 桁ずつの入力欄は自動フォーカス移動と Backspace での戻りを実装し、貼り付けで 6 桁を分配する。autocomplete=「one-time-code」で SMS の自動入力に対応する。