syncfusion-maui-toolkit-otp-input

.NET MAUI OTP 入力（SfOtpInput）スキル

OTP 入力は、認証ワークフローでワンタイムパスワード（OTP）を収集するための専用ユーザーインターフェイスコンポーネントです。このスキルでは、適切な構成、スタイル設定、イベント処理、検証を行いながら、.NET MAUI アプリケーションに OTP 入力コントロールを実装するための包括的なガイダンスを提供します。

このスキルを使用するタイミング

次のような場合に、このスキルを使用してください。

• 認証フローを構築する — SMS またはメールベースの OTP 検証システムを実装する
• 複数段階の検証を作成する — ワンタイムパスワードが必要な安全なログインプロセスを開発する
• パスワードリセットフローを設計する — OTP 確認による安全なアカウント復旧を構築する
• アカウントのセキュリティを実装する — 有効期限付きコードを使った二要素認証（2FA）を追加する
• 構造化された数値／英数字の入力を収集する — 固定長コードの入力に OTP 入力を使用する
• 入力の外観をカスタマイズする — アプリのデザインに合わせて、さまざまなスタイルモード（Outlined、Filled、Underlined）を適用する
• 入力を検証する — OTP コードのリアルタイム検証と入力完了検出を行う
• アクセシビリティに対応する — キーボード操作とスクリーンリーダーとの互換性を確保する

このスキルを使用するきっかけとなるキーワード： OTP、ワンタイムパスワード、認証、検証コード、SMS 認証、メール認証、2FA、二要素認証、OtpInput、SfOtpInput、セキュリティ検証、コード入力、電話番号認証、MAUI 入力

コンポーネントの概要

主な機能：

• 入力タイプ — Number（数値のみ）、Text（英数字）、Password（非表示）の各モード
• スタイルモード — Outlined（枠線）、Filled（背景色）、Underlined（下線のみ）の外観バリエーション
• 長さの設定 — 入力フィールド数を設定可能（例：4 桁または 6 桁のコード）
• 区切り文字のサポート — 視認性を高めるため、入力フィールド間に視覚的な区切りを追加
• 値のバインド — OTP 値をプログラムから取得および設定
• イベント処理 — リアルタイムの入力監視と検証に使用する ValueChanged イベント
• アクセシビリティ — すべてのユーザーに配慮した設計のためのキーボード操作とスクリーンリーダーのサポート

ドキュメントとナビゲーションガイド

はじめに

📄 参照： references/getting-started.md

• インストールと NuGet パッケージのセットアップ
• MauiProgram.cs でのハンドラー登録
• OTP 入力の基本的な実装
• 初期値とフィールドの長さの設定
• XAML および C# の実装パターン

入力タイプ

📄 参照： references/input-types.md

• Number タイプ（デフォルト、数値のみのコード）
• Text タイプ（英数字の OTP コード）
• Password タイプ（プライバシー保護のための非表示／マスク入力）
• 用途に合ったタイプの選択
• タイプの変換と切り替え時の動作

スタイルモード

📄 参照： references/styling-modes.md

• Outlined モード（枠線付きフィールド）
• Filled モード（背景色で塗りつぶされたフィールド）
• Underlined モード（下線のみのフィールド）
• スタイルモードの選択ガイド
• 外観の比較

機能と構成

📄 参照： references/features-and-configuration.md

• Length プロパティ（入力フィールド数）
• 区切り文字の構成（視覚的な間隔）
• 値の取得とバインド
• 無効状態の処理
• フォーカスとカーソルの管理
• マルチプラットフォームに関する考慮事項

イベントと検証

📄 参照： references/events-and-validation.md

• ValueChanged イベントの処理とイベント引数
• リアルタイム入力検証のパターン
• OTP 入力完了の検出
• エラー処理と復旧
• 入力のサニタイズに関するベストプラクティス
• パフォーマンス最適化のヒント