InputPin

InputPinは、認証コードなど複数桁の数字を入力するためのコンポーネントです。

機能

  • 任意の桁数に対応しています
  • 入力すると自動で次の欄にフォーカスが移動します
  • バックスペースで前の欄に戻ります
  • 文字を貼り付けた場合は自動で分割して入力します
  • autocomplete="one-time-code" によりSMS認証コード等の自動入力も一部ブラウザでサポートされています

プロパティ

InputPinは、以下のプロパティをサポートしています。

名前 型 デフォルト値 説明
digits number 6 入力する桁数を指定します。
value string '' 入力値。bind:value で取得できます。
isError boolean false エラー状態を視覚的に示します。
autofocus boolean true 最初のinput要素に自動でフォーカスします。
inputMode "text" | "numeric" "numeric" モバイルキーボードの種別を指定できます。
onInput (value: string, isComplete: boolean) => void なし 入力時に呼ばれるコールバックです。
onComplete (value: string) => void なし すべての桁が入力されたときに呼ばれるコールバックです。

補足

ドキュメント内のサンプルでは、複数のInputPINが並ぶためautofocus={false}を指定し、ページを開いたときに下部まで自動でスクロールされる現象を防いでいます。
実際の利用時にはデフォルトのautofocus={true}が推奨されます。

インストールの手順

以下のコンポーネントのコードを、使いたいプロジェクトにコピー＆ペーストします。
パスは実際のプロジェクトの構成にあわせて更新してください。

使い方

サンプル

Default

特に操作が行われていない、デフォルトの状態です。

Error

入力内容に問題があり、エラーが表示されている状態です。

With Label

Labelコンポーネントと組み合わせて、
InputPinをフォーム内でラベル付き・補足文付きで使う例です。

Digits

digits プロパティを使うことで、
桁数を用途や要件に合わせて自由に変更できます。

Events

イベントハンドラーの登録例です。
onInput・onCompleteイベントの内容をリアルタイムに確認できます。