フォーム v1.0.0

PIN入力

認証コードやOTP入力のための単一文字入力の連続。 入力時にフォーカスが自動的に次へ移動し、貼り付けで全フィールドを一括入力でき、 バックスペースで入力間を移動できます。フォーム送信のためにすべての値を hidden入力に結合します。

プレビュー & コード

オプション

名前 型 デフォルト 説明
length Integer 6 Number of input fields (e.g. 4, 6, 8)
type Symbol :numeric Input mode: :numeric or :alphanumeric
masked Boolean false Show dots instead of characters (like a password field)
separator_after Integer nil Show a dash separator after Nth input (e.g. 3 for "123-456")
label String nil Label text rendered above the inputs
hint String nil Hint text rendered below the inputs
error String nil Error message rendered below the inputs
disabled Boolean false Disables all inputs
name String nil Hidden input name for form submission (combined value)
size Symbol :md Input size: :sm, :md, or :lg

変更履歴 v1.0.0

- Initial release with auto-advance, paste, and backspace navigation
- Hidden input for seamless form submission
- Optional separator dash for grouped codes (e.g. 123-456)
- Masked mode for sensitive inputs
- Three size variants: sm, md, lg
- Dark mode support

フルアクセスを取得

このコンポーネントと他のすべてのソースコードをアンロックしましょう。一回のお支払いで永久アクセス。

今すぐアクセスを取得