[Feature Request] Implement Otp Input Control

[naveenkumar-sanjeevirayan]

Description

The OTP (One-Time Password) input control is a user interface (UI) element designed to facilitate the secure entry of one-time passwords (OTPs), commonly used for authentication in applications. OTPs are temporary passwords that are typically sent to users via SMS, email, or other channels and are valid for a limited time or use.

Key Features:

Input types – Specifies the types of input values, such as Number, Text, and password.

Value – Used to specify the value for the OTP input.

Styling modes – It is used to customize the appearance of the OTP input fields. (Outlined, Underlined and Filled)

Placeholder – It specifies the text that is shown as a hint or placeholder until the user enters a value in the input field.

Separator – It specifies the character or symbol used to separate each input field in the OTP Input component. 

Length – It specifies the length of the OTP input fields.

InputState – Defines the visual state of the OTP input control, including states such as Success, Error, and Warning.

Additional Context

Inspiration from Other Platforms:

• OTP input fields are widely used in platforms like banking apps, e-commerce platforms, and social media verification systems to ensure secure authentication and seamless user interaction.

• Apps like Google, WhatsApp, and PayPal implement OTP fields with advanced features such as automatic focus shifting, success/error indicators, and user-friendly masking for secure input.

• The concept of customizable OTP input aligns with modern security and UX standards, enabling users to input sensitive information quickly and accurately while ensuring data security and compliance.

• A demo showcasing input states like success, warning, and error, or examples from leading apps, can be attached to highlight best practices.

Acceptance Criteria

• The OTP Input control supports customizable field lengths (e.g., 4, 6, or 8 digits).
• Allows customization of the input field's background, borders, and separator.
• Supports input masking for password-like behavior (e.g., dots, stars, or custom characters).
• Displays input states like success, warning, and error with visual indicators.
• Supports automatic focus shifting between fields as users type.
• Optional support for pasting OTPs directly into the control.
• Provides documentation and usage examples.
• Includes unit and UI tests to ensure reliability.

Public API Changes

xmlns:inputs="clr-namespace:Syncfusion.Maui.Toolkit.OtpInput;assembly=Syncfusion.Maui.Toolkit

<inputs:SfOtpInput Length="6" StylingMode="Filled" Placeholder="x" />

Intended Use-Case

Benefits

Enhanced User Experience
Delivers a seamless and user-friendly experience for entering OTPs, with features like automatic focus shifting, input masking, and visual feedback for success, warning, or error states.

Customizable Appearance
Supports extensive customization options for input fields, such as background, border, separator, placeholder, and masked characters, ensuring compatibility with various design themes.

Improved Security
Provides masking options (e.g., dots, stars, or custom characters) for secure OTP entry, ensuring sensitive data remains protected.

Flexible Functionality
Supports varying OTP lengths (e.g., 4, 6, or 8 digits), direct OTP pasting, and dynamic input states, offering developers full control to adapt to diverse app requirements.

Potential Use Cases

Banking and Financial Apps
Enables secure authentication for transactions, account logins, or resetting passwords, ensuring data protection and user trust.

E-commerce Platforms
Provides seamless verification during checkout or account creation processes, enhancing security while maintaining a smooth user experience.

Social Media and Communication Apps
Facilitates quick and secure account verification for login, two-factor authentication, or new device sign-ins, boosting reliability and security.

Healthcare Apps
Supports secure verification for accessing sensitive medical records, booking appointments, or managing prescriptions with user-friendly OTP input.

Educational Platforms
Ensures secure access for online exams, course enrollments, or account verifications, providing a trustworthy experience for students and educators.