syncfusion-maui-toolkit-otp-input

Implement OTP Input controls in .NET MAUI applications for authentication flows. Covers input types (Number, Text, Password), styling modes (Outlined, Filled, Underlined), event handling, value binding, validation patterns, and accessibility. Use this skill when building SMS/email OTP verification, multi-step authentication, or secure login forms.

Skill file

Preview skill file
---
name: syncfusion-maui-toolkit-otp-input
description: Implement OTP Input controls in .NET MAUI applications for authentication flows. Covers input types (Number, Text, Password), styling modes (Outlined, Filled, Underlined), event handling, value binding, validation patterns, and accessibility. Use this skill when building SMS/email OTP verification, multi-step authentication, or secure login forms.
metadata:
  author: "Syncfusion Inc"
  version: "1.0.0"
---

# .NET MAUI OTP Input (SfOtpInput) Skill

The [OTP Input](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.OtpInput.SfOtpInput.html) is a specialized user interface component for collecting one-time passwords (OTPs) in authentication workflows. This skill provides comprehensive guidance for implementing OTP Input controls in .NET MAUI applications with proper configuration, styling, event handling, and validation.

## When to Use This Skill

Use this skill when you need to:

- **Build authentication flows** — Implement SMS or email-based OTP verification systems
- **Create multi-step verification** — Develop secure login processes requiring one-time passwords
- **Design password reset flows** — Build secure account recovery with OTP confirmation
- **Implement account security** — Add two-factor authentication (2FA) with time-limited codes
- **Collect structured numeric/alphanumeric input** — Use OTP Input for any fixed-length code entry
- **Customize input appearance** — Apply different styling modes (Outlined, Filled, Underlined) to match app design
- **Handle input validation** — Real-time validation and completion detection for OTP codes
- **Support accessibility** — Ensure keyboard navigation and screen reader compatibility

**Keywords that should trigger this skill:** OTP, one-time password, authentication, verification code, SMS verification, email verification, 2FA, two-factor authentication, OtpInput, SfOtpInput, security verification, code entry, phone verification, MAUI input

## Component Overview

**Key Features:**
- **Input Types** — Number (numeric-only), Text (alphanumeric), Password (hidden) modes
- **Styling Modes** — Outlined (bordered), Filled (background color), Underlined (underline only) visual variants
- **Configurable Length** — Set the number of input fields (e.g., 4-digit, 6-digit codes)
- **Separator Support** — Add visual separators between input fields for clarity
- **Value Binding** — Retrieve and set OTP values programmatically
- **Event Handling** — ValueChanged event for real-time input monitoring and validation
- **Accessibility** — Keyboard navigation and screen reader support for inclusive design

## Documentation and Navigation Guide

### Getting Started
📄 **Read:** [references/getting-started.md](references/getting-started.md)
- Installation and NuGet package setup
- Handler registration in MauiProgram.cs
- Basic OTP Input implementation
- Setting initial values and field length
- XAML and C# implementation patterns

### Input Types
📄 **Read:** [references/input-types.md](references/input-types.md)
- Number type (default, numeric-only codes)
- Text type (alphanumeric OTP codes)
- Password type (hidden/masked input for privacy)
- Choosing the right type for your use case
- Type conversion and switching behavior

### Styling Modes
📄 **Read:** [references/styling-modes.md](references/styling-modes.md)
- Outlined mode (bordered fields)
- Filled mode (background-filled fields)
- Underlined mode (underline-only fields)
- Styling mode selection guide
- Visual appearance comparison

### Features and Configuration
📄 **Read:** [references/features-and-configuration.md](references/features-and-configuration.md)
- Length property (number of input fields)
- Separator configuration (visual spacing)
- Value retrieval and binding
- Disabled state handling
- Focus and cursor management
- Multi-platform considerations

### Events and Validation
📄 **Read:** [references/events-and-validation.md](references/events-and-validation.md)
- ValueChanged event handling and event args
- Real-time input validation patterns
- OTP completion detection
- Error handling and recovery
- Input sanitization best practices
- Performance optimization tips

Source

Creator's repository · syncfusion/maui-toolkit-ui-components-skills

View on GitHub

Security

Security checks in progress
Results will appear here once audits complete
What this skill can do
Reads your filesConnects to the internetRuns code on your machine
Checked by 3 independent security firms
Does it try to trick the AI?Not yet checkedPending · Gen Agent Trust Hub
Does it sneak in hidden code?Not yet checkedPending · Socket
Does it have known bugs?Not yet checkedPending · Snyk