ワンタイムコード入力
6桁の区切り入力フォーム。1文字入力で次マスへ自動移動、Backspaceで前へ戻る。全桁入力で確認演出、ペースト時は各マスに自動分配。
プレビュー
入力
操作実際に入力して試せます。
仕様書
- 向く場面
- SMS・メールの6桁確認コード入力
- 1桁打つごとに次へ進めたい認証画面
- ペーストで全桁を一括投入させたい入力
- 避ける場面
- 桁数が可変のコード
- 英数混在のコード（数字以外を捨てる）
- 構成要素
- 見出し
- 1桁入力欄×6
- 状態文
- 持っている状態
- 通常
- フォーカス
- 成功
- キーボード
数字を打つと次のマスへ自動移動、Backspace で前のマスへ戻り消す、←→ でマス間を移動、ペーストで各マスに分配。Tab でもマスを移動、フォーカスで全選択
- 支援技術
role=group＋aria-label「6桁のコード入力」、各マスに aria-label「コードN桁目」。1桁目に autocomplete=one-time-code（SMS からの自動入力）。inputmode=numeric。全桁入力は緑枠＋文言（aria-live=polite）で示す
- 動き
枠色・リング 150ms（フォーカスの移動を追える）、状態文の色 200ms。reduced-motion で無効
原則ミラーの法則
デザインの要点
- 1桁打ったら次のマスへ自動で進める。6回 Tab を押させる区切り入力は、区切らない方がまし
- ペーストは1桁目で受けて各マスへ配る。SMS のコードは丸ごとコピーされるので、マス単位では貼れない
- フォーカスで全選択にしておく。打ち間違えたマスに戻ったとき、消してから打つ手間が消える
- 1桁目に autocomplete=one-time-code。iOS などが SMS から候補を出し、そもそも打たずに済む
コード（コピーして使えます）
<div class="otp-wrap">
<p class="otp-label" id="otp-label">確認コードを入力</p>
<div class="otp-fields" id="otp-fields" role="group" aria-label="6桁のコード入力">
<input class="otp-box" type="text" inputmode="numeric" maxlength="1" pattern="[0-9]" aria-label="コード1桁目" autocomplete="one-time-code" />
<input class="otp-box" type="text" inputmode="numeric" maxlength="1" pattern="[0-9]" aria-label="コード2桁目" />
<input class="otp-box" type="text" inputmode="numeric" maxlength="1" pattern="[0-9]" aria-label="コード3桁目" />
<input class="otp-box" type="text" inputmode="numeric" maxlength="1" pattern="[0-9]" aria-label="コード4桁目" />
<input class="otp-box" type="text" inputmode="numeric" maxlength="1" pattern="[0-9]" aria-label="コード5桁目" />
<input class="otp-box" type="text" inputmode="numeric" maxlength="1" pattern="[0-9]" aria-label="コード6桁目" />
</div>
<p class="otp-status" id="otp-status" aria-live="polite">6桁の数字を入力してください</p>
</div>